WordPress WPforms字符限制JS正则移动端不生效如何解决

失效核心原因 #

• 移动端软键盘的候选词选择、联想输入、语音转文字、自动填充场景不会触发keypress事件，原有核心拦截逻辑在这类场景下完全不执行
• 原代码事件对象引用错误：回调函数传入参数为e，内部却直接调用全局event对象，移动端多数浏览器不暴露全局event，会直接导致脚本报错
• 原粘贴校验逻辑无效：copy/paste事件不存在charCode/which属性，无法通过String.fromCharCode获取粘贴内容，且粘贴场景的正则未匹配数字、空格，和输入规则不一致
• 未做兜底校验：没有监听最终输入值变化，绕过事件监听的输入内容无法被拦截
• 原有逻辑未放行退格、方向键、Tab等控制按键，桌面端也存在无法正常删除内容、移动光标的隐性bug

修复后完整代码 #

将你原有添加到主题functions.php或者自定义代码插件的对应代码替换为以下内容即可：

function wpf_dev_char_restrict() {
?>
<script type="text/javascript">
jQuery(function($){
    // 允许的字符规则：英文字母、数字、空格
    const allowRule = /[^a-zA-Z0-9 ]/g;
    // 放行的控制键：退格、Tab、shift、ctrl、alt、大小写锁定、行首行尾、方向键、删除
    const controlKeyCodes = [8,9,16,17,18,20,35,36,37,38,39,40,46];

    // 键盘输入即时拦截
    $(document).on('keydown keypress', '.wpf-char-restrict', function(e){
        const keyCode = e.which || e.keyCode || e.charCode;
        // 控制键、系统组合快捷键直接放行
        if(controlKeyCodes.includes(keyCode) || e.ctrlKey || e.metaKey || e.altKey) return true;
        
        const inputChar = String.fromCharCode(keyCode);
        if(allowRule.test(inputChar)){
            alert("Please fill out the form in English. Thank you!");
            e.preventDefault();
            return false;
        }
    });

    // 粘贴内容处理
    $(document).on('paste', '.wpf-char-restrict', function(e){
        e.preventDefault();
        const pasteText = (e.originalEvent.clipboardData || window.clipboardData).getData('text');
        // 过滤粘贴内容里的非法字符
        const cleanText = pasteText.replace(allowRule, '');
        if(pasteText !== cleanText){
            alert("Pasted content contains invalid characters, non-alphanumeric and space characters have been removed.");
        }
        // 插入过滤后的内容到光标位置
        const input = this;
        const startPos = input.selectionStart;
        const endPos = input.selectionEnd;
        input.value = input.value.substring(0, startPos) + cleanText + input.value.substring(endPos);
        // 移动光标到粘贴内容末尾
        input.selectionStart = input.selectionEnd = startPos + cleanText.length;
        // 触发input事件保证表单值同步
        $(input).trigger('input');
    });

    // 兜底校验：拦截所有非键盘输入场景（移动端候选词、语音、自动填充等）
    $(document).on('input', '.wpf-char-restrict', function(){
        const originalValue = this.value;
        const cleanValue = originalValue.replace(allowRule, '');
        if(originalValue !== cleanValue){
            this.value = cleanValue;
            alert("Please fill out the form in English. Thank you!");
        }
    });
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_char_restrict', 10 );

使用说明 #

• 代码替换后无需额外修改其他配置，只要你需要限制的WPforms字段已经在高级设置中添加了CSS类名wpf-char-restrict即可生效
• 新逻辑兼容桌面端全量浏览器、安卓/iOS移动端浏览器，覆盖键盘输入、粘贴、联想输入、语音转文字、浏览器自动填充所有输入场景
• 修复了原有逻辑无法正常使用退格、方向键等控制按键的问题

内容的提问来源于stack exchange，提问作者Miroslav Krekáč