Question

我有一个这样的表单搜索代码：

<div class="search-box">
<form action="header.php" method="get" accept-charset="utf-8">
<button class="search-button" type="submit"><i class="fa fa-search"></i></button>
<input class="search-field" id="search-box" type="text" placeholder="Search" name="search">
<button class="close-button" id="close-btn" type="reset" style="display:none"><i class="fa fa-times"></i></button>
</form>
</div>

我希望在搜索框长度大于0时使用javascript显示重置按钮，但我的javascript无法正常工作这是我的代码：

<script type="text/javascript">
$(document).ready(function(){
    if($("#search-box").length > 0){
      $('#close-btn').show();  
    }
    });
    $("#close-btn").click(function(e){
        $('#close-btn').hide();
    });
});
</script>

我的代码有什么问题？

我该如何解决这个问题？

Answer 1

这样做：

$(document).ready(function(){
    if($("#search-box").val().length > 0){
      $('#close-btn').show();  
    }
    });
    $("#close-btn").click(function(e){
        $('#close-btn').hide();
    });
});

.val()，取值和.length检查长度。

Answer 2

你应该通过val().trim().length进行检查（这样单独的空格就不算了） - 另外，你应该使用keyup()事件检查输入是否已被修改，否则你就是只检查页面加载（此时它将为空）：

$(document).ready(function(){
    $("#search-box").keyup(function(){
       $('#close-btn').toggle($(this).val().trim().length > 0); 
    });
    $("#close-btn").click(function(e){
        $('#close-btn').hide();
    });
});

<强> jsFiddle here.

Answer 3

你错过了＃34;。＆＃34;在length之前。

$(document).ready(function(){
if($("#search-box").length > 0){
  $('#close-btn').show();  
}
});
$("#close-btn").click(function(e){
    $('#close-btn').hide();
});

}）;

当字段值长度大于0时显示按钮复位？

3 个答案: