如何为WooCommerce自定义地址表单添加JS检测，输入/字符时弹出alert提示？

直接在你现有写在functions.php的钩子函数中追加原生JS监听逻辑即可，不需要额外新建JS文件、也不需要挂载其他WordPress钩子，改动最小、兼容性最高，不会出现DOM元素未加载就执行JS的问题。

完整修改后代码 #

function add_woocommerce_before_shipping_calculator() {
    $button_text = esc_html( 'Please enter your street & suburb to display available shipping options', 'woocommerce' );
    if (WC()->customer->get_shipping_postcode() != null && WC()->customer->get_shipping_city() != null)
        $button_text = esc_html( 'Not your suburb? Enter a different site', 'woocommerce' );
    $content = '<div>
    <a href="#" class="shipping-calculator-button-auto" style="color: green;" >'.$button_text.'</a>
    <div class="form-row form-row-wide" id="calc_shipping_address_auto_field"> 
    <form class="shipping-calculator-form-auto-form" style="display:block;">
        <input type="text" style="border-color:black; border-style: dashed; padding: 20px;" class="input-text" placeholder="Type your suburb" name="calc_shipping_address_auto" id="calc_shipping_address_auto">
    </form></div>
    <!-- 新增JS监听逻辑开始 -->
    <script>
    // 获取目标输入框元素
    const addressInput = document.getElementById("calc_shipping_address_auto");
    // 监听输入事件
    addressInput.addEventListener("input", function() {
        // 检测输入内容是否包含/字符
        if (this.value.includes("/")) {
            alert("请勿输入单元号或门牌号，仅需填写街道、郊区信息即可");
            // 可选：自动清除所有输入的/字符，不需要可以删除下一行
            this.value = this.value.replace(/\//g, "");
        }
    });
    </script>
    <!-- 新增JS监听逻辑结束 -->
    </div>';
    echo $content;
}

add_action( 'woocommerce_before_shipping_calculator', 'add_woocommerce_before_shipping_calculator' );

方案说明 #

• 采用原生JS实现，不依赖jQuery等第三方库，兼容性好、加载速度快
• JS代码直接放在输入框DOM元素之后输出，不需要额外监听DOM加载完成事件，不会出现找不到元素的报错
• 可自定义alert提示文本，也可以选择是否自动清除用户输入的/字符
• 建议将代码放在子主题的functions.php文件中，避免后续父主题更新时代码被覆盖

内容的提问来源于stack exchange，提问作者Md. Kamrul Islam