CSS输入改变并恢复正常

Question

I tried to make a warning if the input is not the same , like the example below:

 $data = document.getElementById("target").value = ""; $("#target").keyup(function() { if ($data.length > 3) { $("#target").css("border-color", "red"); }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input id="target" class="form-control" type="text" value=""> </form> 

But it did not work, so if true then the border-color has to change

Answer 1

You need to move your $data variable into inside keyup events. Since you've add jQuery tag, I've selecting object using jQuery method too.

---

UPDATE

• Simplify the code

 $("#target").keyup(function(){ var $data = $("#target").val(); $("#target" ).css("border-color", $data.length > 3 ? "red" : ""); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input id="target" class="form-control" type="text" value=""> </form> 

Answer 2

In provided example, $data holds "" (empty string)

In event-handler-function , this refers to the element on which event is invoked hence this.value will return the value of the element.

 var $data = $("#target"); $data.val(''); $data.keyup(function() { if (this.value.length > 3) { $("#target").css("border-color", "red"); } else { $("#target").css("border-color", ""); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input id="target" class="form-control" type="text" value=""> </form> 

Another approach I would like to suggest is to using jQuery.toggleClass instead of jQuery.css

 var $data = $("#target"); $data.keyup(function() { $("#target").toggleClass('error', this.value.length > 3); }); 

 .error { border-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input id="target" class="form-control" type="text" value=""> </form>