Question

我正在尝试编写一些代码，如果输入为空，则输入颜色变为红色。用户键入输入后，红色将被删除。

HTML

<html>
<head>
    <!-- add main style -->
    <link rel="stylesheet" href="../css/style.css">
    <!-- add JQuery -->
    <script
        src="https://code.jquery.com/jquery-3.3.1.js"
        integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
        crossorigin="anonymous"></script>
</head>
<body>
<div class="financeContainer">
    <div class="searchBox">
        <input id="financeSearch" type="text" class="financeInput" placeholder="Enter The Code">
        <button id="financeBtn" class="financeSearchBt"><i class="fas fa-search financeSearchIcon"></i></button>
    </div>
</div>
<script>

</script>
</body>
</html>

Css

.redColor{
    color: red;
}

jQuery

$(document).ready(function () {
    $("#financeSearch").keydown(function () {
        if ($("#financeSearch").val().length>0){
            $("#financeSearch").removeClass("redColor")
        }
    });
    $(document).bind('keypress', function(e) {
        if(e.keyCode==13){
            $('#financeBtn').trigger('click');
        }
    });
    $("#financeBtn").click(function () {
        var financeKey = $("#financeSearch").val();
        if (financeKey == ""){
            $("#financeSearch").addClass("redColor")
        }
});

提交按钮后，输入将获得类redColor。我希望如果用户键入红色，该颜色将被删除。但是输入2个字符后就完成了。我希望在输入第一个字符后完成。

Answer 1

调用keydown时，最后输入的字符尚未添加到输入值中。因此，这就是为什么您需要输入两个字符以消除红色的原因。

您应该使用keyup而不是keydown

您无需在事件处理程序中选择$("#financeSearch")，只需使用$(this)。

也无需比较大于length的{{1}}。您可以直接输入0，因为数字中除$(this).val().length以外的所有值都是真实的。

$(document).ready(function() {
  $("#financeSearch").keyup(function() {
    if ($(this).val().length) {
      $(this).removeClass("redColor")
    }
  });
  $(document).bind('keypress', function(e) {
    if (e.keyCode == 13) {
      $('#financeBtn').trigger('click');
    }
  });
  $("#financeBtn").click(function() {
    var financeKey = $("#financeSearch").val();
    if (financeKey == "") {
      $("#financeSearch").addClass("redColor")
    }
  });
});

.redColor {
  color: red;
}

Answer 2

实际上，您可以使用CSS和单个HTML属性来完成所有操作。另外请注意，至少在Chrome中，要定位占位符的颜色，您需要在CSS中明确地做到这一点

:invalid, :invalid::placeholder {
  color: red;
  box-shadow: none;
}

<div class="financeContainer">
  <div class="searchBox">

    <input id="financeSearch" type="text" class="financeInput" placeholder="Enter The Code"
    required ><!-- add this attribute -->
    
    <button id="financeBtn" class="financeSearchBt"><i class="fas fa-search financeSearchIcon"></i></button>
  </div>
</div>

但是，如果您真正想要的只是设置此占位符的颜色，那么您甚至不需要此HTML属性：

#financeSearch::placeholder {
  color: red;
}

<div class="financeContainer">
  <div class="searchBox">

    <input id="financeSearch" type="text" class="financeInput" placeholder="Enter The Code">
    
    <button id="financeBtn" class="financeSearchBt"><i class="fas fa-search financeSearchIcon"></i></button>
  </div>
</div>

输入长度大于0不能正常工作

2 个答案: