jqxMaskedInput粘贴处理后赋值ID时输出值与原值不一致问题

算力阿峰

2026-10-3

问题根因

掩码配置不匹配：你设置的掩码'(###)###-#######'合计有13位数字占位符，而你输入的目标号码(330)535-0505仅含10位数字，占位符数量不匹配导致内容自动错位填充。
事件触发逻辑冲突：keyup事件触发时，jqxMaskedInput本身的掩码解析逻辑还未执行完成，此时拿到的val是未完全处理的错位内容，你修改后重新赋值会触发二次解析，进一步加重内容偏差。
取值方式冗余：jqxMaskedInput内置了纯数字取值能力，无需自行写正则过滤非数字字符。

解决方案

第一步：修正掩码配置

将掩码调整为和目标号码位数匹配的规则，10位号码对应掩码为'(###)###-####'。

第二步：使用控件原生事件和API取值赋值

替换keyup监听为控件自带的valueChanged事件，直接通过rawValue属性获取纯数字内容，赋值时直接传入符合长度的纯数字即可。

修正后代码

// 初始化控件，掩码调整为匹配10位号码的规则
$("#id").jqxMaskedInput({
    height: 20,
    width: 115,
    theme: theme,
    mask: '(###)###-####'                    
});

// 监听值变化事件，而非keyup
$("#id").on('valueChanged', function (event) {
    // 直接获取纯数字原始值，无需正则过滤
    var pureNumber = event.args.rawValue;
    console.log(pureNumber); // 输入(330)535-0505时输出3305350505
    
    // 赋值直接传纯数字即可，控件会自动按掩码格式化
    // 示例：赋值为3305350505时，UI自动显示为(330)535-0505
    // $("#id").val(pureNumber);
});

// 如果需要单独处理粘贴场景，可额外绑定paste事件
$("#id").on('paste', function(e) {
    var pastedText = e.originalEvent.clipboardData.getData('text');
    // 过滤非数字
    var pureNum = pastedText.replace(/[^0-9]/g, '');
    if(pureNum.length === 10) {
        e.preventDefault();
        $("#id").val(pureNum);
    }
});