如何在WooCommerce注册页为自定义手机号字段添加输入掩码

要给WooCommerce注册页的自定义手机号字段添加输入掩码，你需要调整掩码加载的判断条件，并修改JS选择器匹配注册页的字段ID，具体实现如下：

核心修改要点 #

• 注册页判断逻辑：WooCommerce注册页属于账户页的子页面，通过?action=register参数访问，可用is_account_page() && isset($_GET['action']) && $_GET['action'] === 'register'精准判断
• 字段选择器适配：注册页的手机号字段ID为reg_billing_phone，需和结账页的billing_phone一同加入掩码绑定

修改后的完整掩码代码 #

// 手机号输入掩码
add_action('wp_enqueue_scripts', 'masked_input');
function masked_input() {
    // 覆盖结账页、账户地址页、注册页
    if (is_checkout() || is_account_page()) {
        wp_enqueue_script('masked_input', get_site_url().'/wp-content/JS/jquery.maskedinput.min.js', array('jquery'));
        add_action( 'wp_footer', 'masked_script', 999);
    }
}
 
function masked_script() {
    if ( wp_script_is( 'jquery', 'done' ) ) {
?>

<script type="text/javascript">
    jQuery( function( $ ) {
        $.mask.definitions['h'] = "[0|1|2|3|4|5|6|9]";
        // 同时绑定结账页、账户页、注册页的手机号字段
        $("#billing_phone, #reg_billing_phone").mask("+998 (h)99-99-999");
    });
</script>

<?php
    }
}

补充说明 #

• 若需更精准控制页面范围，可将判断条件拆分为：is_checkout() || (is_account_page() && isset($_GET['action']) && $_GET['action'] === 'register') || (is_account_page() && !isset($_GET['action']))，分别对应结账页、注册页、账户地址编辑页
• 原掩码格式"+998 (h999999999"存在语法缺失，建议调整为示例中的规范格式，避免掩码功能失效

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