Javascript 如果用“删除”删除文本，则输入未检测到其为空；ctrl+；a和x2B；退格“；

我正在使用jQuery和输入字段进行一些简单的

div

过滤。它正在工作，但是如果我使用“Ctrl+a+backspace”删除输入，也就是说，如果我选择所有文本并删除它，它不会检测到它是空的。这是什么原因

如果使用键盘命令，它不会将div重新排序回默认值，但是如果将每个字符退格，它会返回到正常值

我就是这样做的：

$('#brandSearch').keyup(function() {
    var valThis = $(this).val().toLowerCase();
    if (valThis.length == 0) {
        $('.card').show();
    } else {
        $('.card').each(function() {
            var text = $(this).text().toLowerCase();
            (text.indexOf(valThis) >= 0) ? $(this).parent().show(): $(this).parent().hide();
        });
    };
});

---

它似乎工作得很好：

$（'#brandSearch'）.keyup（函数（）{
var valThis=$（this.val（）.toLowerCase（）；
如果（valThis.length==0）{
$（'.card'）.show（）；
log（“输入为空”）；
}否则{
console.log（“输入不为空”）；
$（'.card'）。每个（函数（）{
var text=$（this.text（）.toLowerCase（）；
（text.indexOf（valThis）>=0）？$（this.parent（）.show（）：$（this.parent（）.hide（））；
});
};
});
处理空字符串的
if
块未显示与
else
块隐藏的元素相同的元素。
else
块调用
.parent（）
，但
if
块不调用

因此，
else
案例显示或隐藏每个
.card
元素的父元素，但是
if
案例显示
.card
元素本身，而不取消隐藏它们的父元素。请参阅添加到代码中的我的注释（为了清楚起见，我还重新格式化了
else
中的条件表达式）：

由于听起来非空字符串的大小写工作正常，因此只需在
if
块中添加
.parent（）
，使其与其他大小写匹配即可：

$('#brandSearch').keyup(function() {
    var valThis = $(this).val().toLowerCase();
    if (valThis.length == 0) {
        // Show the parent of each .card element
        $('.card').parent().show();
    } else {
        // Show or hide the parent of each .card element
        $('.card').each(function() {
            var text = $(this).text().toLowerCase();
            text.indexOf(valThis) >= 0 ?
                $(this).parent().show() :
                $(this).parent().hide();
        });
    };
});

在这种情况下，熟悉浏览器的调试工具将获得巨大的回报。
.show（）
或
.hide（）
方法操作DOM，通过使用DOM检查器，您可以很容易地看到哪些元素被隐藏和显示

事实上，作为一个学习练习，我建议通过返回原始代码暂时取消修复bug，然后打开DOM检查器，看看它是如何揭示问题的。在这里，还可以尝试JavaScript调试器和其他工具

如果你使用Chrome，这里有一个例子。其他浏览器也有类似的工具和文档。如果我使用“ctrl+a”删除输入，
ctrl+a
不会删除输入。然后按backspace。很抱歉在这种情况下这并不重要。。。但是为什么不使用
input
事件而不是
keyup
，我想知道？试着在上注册
（'input'，..
事件。请看下面的示例：奇怪，它真的起作用了。可能是因为我使用了materializecss输入字段吗？我看到控制台显示输入不是空的，但它不会返回。它不会再次显示所有div。我不熟悉这种类型的输入，但它肯定只会触发even当按下可打印字符时。此外，
.keyup
不是最好的注册事件，如果您希望及时检测到更改。您完全正确。我实际上以前没有看到您的评论。但是
.length==0
和
val==”
之间有什么区别？我看不到
val==“”
在代码中，但这将测试
val
是否是由单个空格字符组成的字符串。如果您询问的是
val==“”
，这与
val.length==0
基本相同，假设
val
是一个字符串。好的，谢谢你澄清这一点，我刚刚开始使用Jquery和javascript语言，有很多方法可以声明内容。好了，你有了一个很好的开始！：-）请参阅我在答案中添加的关于浏览器调试工具的注释。它们将真正帮助您跟踪此类问题。
$('#brandSearch').keyup(function() {
    var valThis = $(this).val().toLowerCase();
    if (valThis.length == 0) {
        // Show the parent of each .card element
        $('.card').parent().show();
    } else {
        // Show or hide the parent of each .card element
        $('.card').each(function() {
            var text = $(this).text().toLowerCase();
            text.indexOf(valThis) >= 0 ?
                $(this).parent().show() :
                $(this).parent().hide();
        });
    };
});