Question

当有人开始在搜索字段中输入文字时，我正在使用下面的代码来隐藏div。

$('#search').keypress(function() {
$('#hello').hide();
$(this).focus();
});

我的问题是，我不知道当清除搜索字段中的文本时，如何再次显示隐藏的div。有人可以帮助或指导我吗？

jsfiddle here

Answer 1

您可以测试字段是否为空（当 keyup 时）：

$('#search').keyup(function() {
if($(this).val() == ''){
  $('#hello').show();
}
else{
 $('#hello').hide();
 $(this).focus();
}

});

Answer 2

$('#search').keyup(function() {
    var searchTerm = $(this).val();
    var searchTermLength = searchTerm.length;
    if (searchTermLength == 0) {
        $('#hello').show()
    } else {
        $('#hello').hide()
    };
});

Answer 3

以下是使其有效的代码

$('#search').keyup(function() {
    if($(this).val() == ''){
        $('#hello').show();
    }else{
        $('#hello').hide();
    }
});

这是更新的JSFiddle代码

Answer 4

$('#search').keyup(function() {
    if ($("#search").val().length != 0) {
        $('#hello').hide();
    } else {
        $("#hello").show();
    }
});

Answer 5

这就是诀窍

    $('#search').keyup(function() {
        $(this).val().length ? $('#hello').hide() : $('#hello').show();
    });

Answer 6

改为使用change（）函数，只有当字段的值完全改变时才会调用它。

$('#search').change(function() {
if($(this).val() == ''){
    $('#hello').show();
}else{
    $('#hello').hide();
}

}）;

在字段中键入文本时隐藏div，并在删除文本时再次显示该文件

6 个答案: