如何在文本框按键或编辑时移除特殊字符与空格，限制手机号为10位

现有代码问题 #

• jQuery赋值逻辑错误：.val是方法而非属性，设置输入框值需要调用.val(目标值)，直接给.val赋值不会生效
• 缺少字符替换逻辑：仅定义了特殊字符正则，没有对原始输入内容做过滤处理
• 未实现位数限制、手机号格式化的核心需求

正确实现代码 #

$(document).ready(function () {
    // 推荐用input事件代替change，输入过程中实时处理，不需要失焦才触发
    $('#<%= TextBox_Phone1.ClientID%>').on('input', function () {
        // 1. 提取输入内容中的所有数字，过滤非数字字符
        let rawNumber = $(this).val().replace(/\D/g, '');
        // 2. 限制最长10位
        rawNumber = rawNumber.slice(0, 10);
        // 3. 格式化为(###)-###-####格式
        let formattedNumber = '';
        if (rawNumber.length > 0) {
            formattedNumber = '(' + rawNumber.substring(0, 3);
        }
        if (rawNumber.length >= 3) {
            formattedNumber += ')-' + rawNumber.substring(3, 6);
        }
        if (rawNumber.length >= 6) {
            formattedNumber += '-' + rawNumber.substring(6, 10);
        }
        // 4. 赋值回输入框
        $(this).val(formattedNumber);
    });
});

如果需要保持原有的失焦才触发的逻辑，把事件绑定的input改成change即可。

逻辑说明 #

• 用/\D/g正则匹配所有非数字字符，一次性过滤空格、特殊符号，不需要单独列举所有特殊字符
• 输入实时处理，用户输入过程中自动完成过滤、截断、格式化，不会出现无效字符
• 格式化逻辑适配输入过程的不同长度，不会在输入前几位的时候出现多余的括号、横杠

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