WordPress中如何在文本框为空时自动聚焦到该文本框？

你的代码存在几个关键问题导致失效，以下是具体修复步骤：

1. 函数未绑定WooCommerce结账验证钩子 #

WooCommerce的结账字段验证需要将处理函数绑定到woocommerce_checkout_process钩子上，否则函数不会在结账提交时触发。

2. JavaScript仅定义未调用，且未确保DOM加载完成 #

你定义了setFocusToTextBox函数，但没有执行它；同时直接输出的脚本可能在目标元素加载前运行，导致找不到fb_zalo元素。

3. 表单字段名与POST键需匹配 #

确认你的结账字段的name属性是fbhoaczalo，如果表单里的name是fb_zalo，那$_POST['fbhoaczalo']永远为空，逻辑就会出错。

修复后的完整代码 #

function customised_checkout_field_process() {
    // 先检查POST字段是否存在且不为空
    if ( ! isset( $_POST['fbhoaczalo'] ) || empty( trim( $_POST['fbhoaczalo'] ) ) ) {
        wc_add_notice( __( '请填写此字段' ), 'error' );
        
        // 添加内联脚本，确保DOM就绪后执行聚焦
        add_action( 'wp_footer', function() {
            ?>
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    var textbox = document.getElementById("fb_zalo");
                    if (textbox) {
                        textbox.focus();
                        textbox.scrollIntoView({ behavior: 'smooth' });
                    }
                });
            </script>
            <?php
        }, 99 );
    }
}
// 绑定到WooCommerce结账验证钩子
add_action( 'woocommerce_checkout_process', 'customised_checkout_field_process' );

关键修改说明 #

• 增加了isset()检查和trim()，避免空字符串或未设置字段的误判
• 将脚本添加到wp_footer钩子，确保在页面底部加载，且用DOMContentLoaded事件确保元素已存在
• 绑定了woocommerce_checkout_process钩子，让函数在结账提交时触发
• 增加了元素存在性检查，避免控制台报错

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