logo标签列表

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

javascriptjqueryhtmlcss
4
我试图编写一些代码，如果输入为空，则将输入的颜色更改为红色。用户输入后，红色颜色将被删除。
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")
        }
});

当按钮提交后，输入框会得到红色样式。我希望当用户开始输入时，红色样式能够被移除。但实际上需要输入两个字符才能移除。我希望在输入第一个字符后就能移除红色样式。
通过一个小脚本，您可以使用CSS非常优雅地解决这个问题：https://stackoverflow.com/questions/44333727/simulation-of-a-placeholder/44333787#44333787 - Asons
2个回答
5

keydown事件被触发时，最后输入的字符还没有添加到输入框的值中。这就是为什么需要输入两个字符才能去掉红色的颜色。

应该使用keyup而不是keydown。

在事件处理程序中不需要选择$("#financeSearch")，只需使用$(this)即可。

并且不需要将length与0进行比较。可以直接使用$(this).val().length, 因为除了数字中的0以外的所有值都为真值。

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

（咳嗽声）你应该使用“input”事件。 - Kaiido
4
你实际上可以使用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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接