CSS输入改变并恢复正常

CSS input change and return to normal

本文关键字：恢复 输入 改变 CSS      更新时间：2023-09-26

如果输入不相同，我试图发出警告，就像下面的例子:

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

但是它不起作用，所以如果为true则border-color必须更改

您需要将$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>

在提供的示例中，$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>

相关文章：