javascript - CSS 输入改变并恢复正常

Question

如果输入不相同，我尝试发出警告，如下例所示:

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

但它不起作用，所以如果为真，则边框颜色必须更改

Answer 1

您需要将您的 $data 变量移动到内部 keyup 事件中。由于您添加了 jQuery 标记，我也使用 jQuery 方法选择了对象。

---

更新

• 简化代码

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