WordPress（Shopkeeper主题）JS文本框禁词功能无效求助

Hey there, let's fix that non-working script step by step. I notice you've got the basics in place, but there are a few key issues keeping it from working properly:

1. 脚本里的多余HTML标签 #

First off, your avoidtext.js file includes a stray <input id="field_1_17" /> tag. This doesn't belong in a JS file—it'll render an extra input box on your page and can mess with your logic. Delete that line immediately.

2. DOM加载时机问题 #

Your original script tries to grab the input element right away, but WordPress loads scripts before the page's DOM is fully rendered more often than not. That means document.getElementById('field_1_17') returns null when the script runs, so the event listener never gets attached.

3. 正则匹配与替换逻辑缺陷 #

Your regex doesn't use the global flag (g), so it only replaces the first occurrence of a banned word. Plus, your loop doesn't properly update the input value as you check each banned term.

修复后的代码 #

更新 avoidtext.js

Replace your existing code with this:

// Wait for the entire DOM to load before running
document.addEventListener('DOMContentLoaded', function() {
    const bannedWords = ['MMM', 'XXX'];
    const targetInput = document.getElementById('field_1_17');

    // Check if the input exists first to avoid errors
    if (!targetInput) {
        console.warn('Target input field not found—double-check the ID!');
        return;
    }

    // Use 'input' event instead of keyup to catch all input methods (paste, drag, etc.)
    targetInput.addEventListener('input', function(e) {
        let inputValue = this.value;
        let bannedDetected = false;

        bannedWords.forEach(word => {
            // Global regex to replace all instances; add 'i' inside the regex if you want case-insensitive matching
            const regex = new RegExp(word, 'g');
            if (regex.test(inputValue)) {
                bannedDetected = true;
                inputValue = inputValue.replace(regex, '');
                alert(`${word} is not allowed!`);
            }
        });

        this.value = inputValue;
    });
});

更新主题 functions.php 的脚本入队代码

Your enqueue code can be improved for reliability and flexibility:

function enqueue_my_custom_script() {
    // Use a dynamic URL instead of hardcoding your domain
    $script_uri = get_stylesheet_directory_uri() . '/avoidtext.js';
    // Enqueue in the footer (last parameter = true) to ensure DOM is ready when it runs
    wp_enqueue_script( 'avoidtext', $script_uri, array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_custom_script' );

额外排查步骤 #

• Verify the input ID: Right-click the input field in your browser, select "Inspect", and confirm the ID is exactly field_1_17—form plugins like Gravity Forms sometimes tweak IDs dynamically.
• Check the browser console: Hit F12, go to the Console tab, and look for errors (like "cannot read property 'addEventListener' of null")—this will tell you if the script can't find your input.
• Script load order: If you're using a form plugin, make sure your custom script loads after the plugin's scripts. You can add the plugin's script handle to the dependencies array (the third parameter in wp_enqueue_script) if needed.

内容的提问来源于stack exchange，提问作者vctburk