javascript – CSS输入更改并恢复正常

如果输入不相同,我试图发出警告,如下例所示：

$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>

但它不起作用,所以如果是真的那么边框颜色必须改变

解决方法:

您需要将$data变量移动到内部keyup事件中.既然你已经添加了jQuery标签,我也会使用jQuery方法选择对象.

UPDATE

>简化代码

$("#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>

标签：html,javascript,jquery,css,twitter-bootstrap-3
来源： https://codeday.me/bug/20190828/1756327.html