Question

我是Javascript的新手，我正在创建我的第一个Chrome扩展程序。这真的只是个人挑战。

我想在用户在任何网站上输入某些字词时提醒用户。也许是Google或Bing上的搜索输入字段，或者可能是在他们输入Facebook状态时。

我对Javascript不是很熟悉，这可能吗？在追踪和错误之后，我想出了这个，但它只适用于网站上的特定输入字段。

$(function() {
    var triggerWords = ['badword', 'wordbad'];
    $('#input').keyup(function() {
        for (var i = 0; i < triggerWords.length; i++) {
            if ($(this).val().toLowerCase() == triggerWords[i]) {
                alert('Alert! You've typed a blocked word.');
            }
        }
    });
});

Answer 1

上述答案适用于单个输入。但是，如果您希望它也适用于动态生成的输入，则可能需要稍微更改一下您的功能。

这不适用于动态生成的输入（Demo）

$('input').keyup(function() {
    for (var i = 0; i < triggerWords.length; i++) {
        if ($(this).val().toLowerCase().indexOf(triggerWords[i]) != -1) {
            alert("Alert! You've typed a blocked word.");
        }
    }
});

但这确实（Demo）

 $(document).on('keyup', 'input', function() {
    for (var i = 0; i < triggerWords.length; i++) {
        if ($(this).val().toLowerCase().indexOf(triggerWords[i]) != -1) {
            alert("Alert! You've typed a blocked word.");
        }
    }
});

Answer 2

好的方法，你正确的方式。

$(function() {添加一个匿名函数，但你必须手动调用它（并且很难调用没有名字的函数:)）。更好地使用它：$( document ).ready(function() {它告诉文档在文档准备就绪时调用此匿名函数。

$('#input')选择ìd == #input的所有元素。这不是你想要的。您想要选择所有input元素（删除id-selector #）。顺便说一句：.someClass会选择class == someClass的所有元素。

$(this).val().toLowerCase() == triggerWords[i]测试是否只输入其中一个被阻止的字词。它完全没问题，但我认为如果键入的string 包含其中一个词，我更愿意。使用$(this).val().toLowerCase().indexOf(triggerWords[i]) != -1

总结：

$( document ).ready(function() {
    var triggerWords = ['badword', 'wordbad'];
    $('input').keyup(function() {
        for (var i = 0; i < triggerWords.length; i++) {
            if ($(this).val().toLowerCase().indexOf(triggerWords[i]) != -1) {
                alert("Alert! You've typed a blocked word.");
            }
        }
    });
});

最后一件事，你可以像这样使用for-each的JS版本：

for(var word in triggerWords){
  if($(this).val().toLowerCase().indexOf(word) != -1) {...}
}

如何在键入特定单词时提醒用户

2 个答案: