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>

Answer 2

在提供的示例中，$data 包含 ""（空字符串）

在event-handler-function 中，this 指的是调用事件的元素，因此this.value 将返回该元素的value。

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>

我想建议的另一种方法是使用jQuery.toggleClass 而不是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>