javascript - 当字段值长度大于 0 时显示按钮重置？

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>

我想通过使用 javascript 在搜索框长度超过 0 时显示重置按钮，但我的 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

你应该通过 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.