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

Question

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

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

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>

Run Code Online (Sandbox Code Playgroud)

的CSS

.redColor{
    color: red;
}

Run Code Online (Sandbox Code Playgroud)

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")
        }
});

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Mah*_*Ali 5

When the keydown is called the last entered character is not yet added to the value of input. So thats why you need to enter two characters to remove red color.

You should use keyup instead of keydown

You don't need to select $("#financeSearch") inside the event handler just use $(this).

And also no need to compare the length greater than 0. You can directly put $(this).val().length because all values other than 0 in numbers are truthy.

$(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")
    }
  });
});

Run Code Online (Sandbox Code Playgroud)

.redColor {
  color: red;
}

Run Code Online (Sandbox Code Playgroud)

<!-- add JQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，10 月前
查看次数：	76 次
最近记录：	6 年，10 月前