Javascript 阻止文本框中的某些单词

我试图阻止在我的wordpress商店中使用js在文本框中输入某些单词。我用的是店主主题

我首先在我的站点根目录中创建了一个名为avoidtext.js的文件，并输入了以下代码，如本文所示：

var-banked=['MMM'，'XXX']；
document.getElementById（'field_1_17'）。addEventListener（'keyup'，function（e）{
var text=document.getElementById（'field_1_17'）。值；
对于（var x=0；x问题在于，您的脚本是在浏览器有机会完全解析DOM之前执行的。根据您的代码，您的JS文件被注入到网站的
部分，并且您的元素位于
标记的下方。因此，对于您的脚本，您的
字段是
元素不存在，因此无法添加事件侦听器函数

解决此问题的两种方法：

选项1。将脚本插入站点的页脚部分：

function enqueue_my_custom_script() {
    wp_enqueue_script(
        'avoidtext', // slug
        'https://reubenstore.com/avoidtext.js', // path to script
        array(), // dependencies
        true // wether to place the script in the head section (false) or in the footer section (true)
    );
}

add_action( 'wp_enqueue_scripts', 'enqueue_my_custom_script' );

这样，当浏览器读取脚本时，您的元素已经被它解析了，可以用于脚本

选项2。在DOM准备好进行操作后运行脚本：

function enqueue_my_custom_script() {
    wp_enqueue_script(
        'avoidtext', // slug
        'https://reubenstore.com/avoidtext.js', // path to script
        array(), // dependencies
        true // wether to place the script in the head section (false) or in the footer section (true)
    );
}

add_action( 'wp_enqueue_scripts', 'enqueue_my_custom_script' );

浏览器完全解析网站的HTML后，使用事件触发脚本：

document.addEventListener('DOMContentLoaded', function(){

    var banned = ['MMM','XXX'];
    document.getElementById('field_1_17').addEventListener('keyup', function(e) {
        var text = document.getElementById('field_1_17').value;
        for (var x=0;x<banned.length;x++) {
            if (text.search(banned[x]) !== -1) {
                alert(banned[x]+' is not allowed!');
            }
            var regExp = new RegExp(banned[x]);
            text = text.replace(regExp,'');
        }
        document.getElementById('field_1_17').value = text;
    }, false);

});

document.addEventListener（'DOMContentLoaded'，function（）{
var=['MMM'，'XXX']；
document.getElementById（'field_1_17'）。addEventListener（'keyup'，function（e）{
var text=document.getElementById（'field_1_17'）。值；
对于（var x=0；x对此表示抱歉，谢谢！检查浏览器的控制台日志。是否看到任何警告/错误消息这可能与您的脚本有关？@cabrerahector是的，有。未捕获的TypeError:无法读取avoidtext.js？ver=5.2.3:2ok处null的属性'addEventListener'，所以从我读到的内容来看，这基本上是因为它正在查找的元素在脚本执行时没有加载。我只是想知道该元素是隐藏的吗页面上的某个选择是否会影响这一点？请查看下面的答案，如果您有任何问题，请告诉我。非常感谢。现在我收到了错误：Uncaught TypeError:text.search不是htmlilement的函数。这里有任何想法。
search（）
函数只能在字符串上使用。似乎您试图在
LI
元素上使用它（或者至少错误是这么说的），这就是为什么会出现该错误。我假设您一定更改了代码中的某些内容？