WordPress FunnelKit结账页阿塞拜疆手机号掩码修复求助

需求说明 #

需在FunnelKit结账页面的手机号字段实现以下效果：

• 固定开头为0，无法删除或修改
• 输入时自动格式化为(056) 234-56-67样式
• 修复旧代码中用户重新输入/删除数字时的功能异常问题

旧代码问题分析 #

原代码依赖keydown事件和输入长度判断添加分隔符，存在以下缺陷：

• 未固定开头的0，用户可随意删除或修改
• 仅在按键按下时触发格式调整，回退、删除或修改中间字符时格式会混乱
• 未处理光标位置，用户编辑中间内容时光标会强制跳转到末尾

修复后的代码 #

将以下代码替换原有代码片段，添加到主题的functions.php文件中：

add_action( 'wp_footer', 'funnelkit_fixed_phone_mask' );
function funnelkit_fixed_phone_mask() {
    wc_enqueue_js( "
        // 目标手机号字段选择器
        const phoneFields = $('#tel_no, #alt_tel_no');
        
        // 初始化字段：设置固定开头、占位符、最大长度
        phoneFields.each(function() {
            const $field = $(this);
            // 初始值为空时设置固定开头的括号部分
            if (!$field.val()) {
                $field.val('(0');
            }
            $field.attr('placeholder', 'Tel. nömrəsi (0__) ___-__-__');
            $field.attr('maxlength', '15');
            // 阻止用户删除开头的(0部分
            $field.on('keydown', function(e) {
                const cursorPos = this.selectionStart;
                // 光标在(0范围内时，禁止删除/退格键
                if (cursorPos <= 2 && (e.key === 'Backspace' || e.key === 'Delete')) {
                    e.preventDefault();
                    return false;
                }
                // 只允许数字和控制键
                const allowedKeys = [8, 9, 46, 37, 39]; // 退格、制表、删除、左右箭头
                const isNumber = (e.key >= '0' && e.key <= '9') || (e.keyCode >= 96 && e.keyCode <= 105);
                if (!isNumber && !allowedKeys.includes(e.keyCode)) {
                    e.preventDefault();
                    return false;
                }
            });
            
            // 实时处理输入格式
            $field.on('input', function() {
                let value = $(this).val().replace(/[^0-9]/g, '');
                // 强制保留开头的0
                if (value.length === 0) {
                    value = '0';
                } else if (value.charAt(0) !== '0') {
                    value = '0' + value;
                }
                
                // 构建格式化后的字符串
                let formatted = '';
                if (value.length >= 1) {
                    formatted += '(' + value.substring(0, 3); // (0XX
                    if (value.length >= 3) {
                        formatted += ') ' + value.substring(3, 6); // ) XXX
                        if (value.length >= 6) {
                            formatted += '-' + value.substring(6, 8); // -XX
                            if (value.length >= 8) {
                                formatted += '-' + value.substring(8, 10); // -XX
                            }
                        }
                    }
                }
                
                // 保存光标位置，避免格式调整时光标跳走
                const cursorPos = this.selectionStart;
                const originalLength = $(this).val().length;
                $(this).val(formatted);
                // 计算新的光标位置
                const newLength = formatted.length;
                let newCursorPos = cursorPos + (newLength - originalLength);
                // 限制光标位置不超出有效范围
                newCursorPos = Math.min(newCursorPos, newLength);
                newCursorPos = Math.max(newCursorPos, 2); // 光标不能移到(0之前
                this.setSelectionRange(newCursorPos, newCursorPos);
            });
        });
    " );
}

代码功能说明 #

1. 固定开头0：强制保留开头的0，用户无法删除或修改，输入非0开头内容时自动补0
2. 实时格式调整：使用input事件监听所有输入变化（包括粘贴、删除、回退），确保格式始终正确
3. 光标位置维护：处理格式调整后的光标位置，避免用户编辑时光标跳转到末尾
4. 输入限制：仅允许输入数字和必要的控制键（退格、删除、左右箭头、制表）
5. 自动格式化：根据输入长度自动添加()、空格和-分隔符，最终格式为(056) 234-56-67

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