文章/答案/技术大牛

发布

社区首页 >问答首页 >输入长度大于0不能正常工作

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

Stack Overflow用户

提问于 2019-05-02 14:38:04

回答 2查看 420关注 0票数 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")
        }
});

当提交按钮时，输入将获得类redColor.and，如果用户输入，红色将被删除。但在输入2个字符之后，它就完成了。我希望在输入第一个字符后完成。

javascript

jquery

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-05-02 14:41:01

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

您应该使用keyup而不是keydown

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

并且也不需要比较大于0的length。您可以直接放入$(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>

票数 5

Stack Overflow用户

发布于 2019-05-02 15:47:10

实际上，您可以使用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>

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55946888

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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