ASP.NET如何限制TextBox仅输入10位数字并隐藏type=number箭头

原有实现存在三个核心问题：

1. type="number"原生输入框默认不触发maxlength属性限制，且自带上下调节箭头
2. 正则验证控件仅在提交/失焦时触发校验，无法实时拦截非法输入，也不支持粘贴内容自动过滤
3. 验证控件属性存在拼写错误，ControValidator为无效写法，需修正为标准属性ControlToValidate

1. 样式调整：隐藏数字输入框默认上下箭头 #

添加如下CSS样式，兼容Chrome、Edge、Firefox等主流浏览器：

/* 隐藏number输入框原生上下调节按钮 */
.num-input-hide-spin::-webkit-outer-spin-button,
.num-input-hide-spin::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.num-input-hide-spin {
    -moz-appearance: textfield;
}

2. 修正服务端控件代码 #

调整TextBox和验证控件属性，修正拼写错误，更新正则规则同时校验数字格式和长度上限：

<asp:TextBox ID="txt" runat="server" CssClass="num-input-hide-spin"
    IsReadOnly="false" Type="Number" MaxLength="10"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpression1" runat="server"
    ControlToValidate="txt" ValidationExpression="^\d{1,10}$"
    ErrorMessage="仅允许输入最多10位纯数字"></asp:RegularExpressionValidator>

保留type="Number"属性不变，可保证移动端访问时自动唤起数字键盘，输入体验更友好

3. 前端JS实现实时输入拦截与粘贴过滤 #

添加如下原生JS代码（无需依赖jQuery），实现实时输入限制、粘贴内容自动清洗，从源头阻断非法输入：

document.addEventListener('DOMContentLoaded', function () {
    // 获取渲染后的客户端输入框实例
    const targetInput = document.getElementById('<%= txt.ClientID %>');
    if (!targetInput) return;

    // 拦截非法按键：仅允许数字、功能键、常用快捷键
    targetInput.addEventListener('keydown', function (e) {
        // 放行通用功能键
        const allowFuncKeys = ['Backspace', 'Tab', 'Enter', 'Delete', 'ArrowLeft', 'ArrowRight', 'Home', 'End'];
        if (allowFuncKeys.includes(e.key)) return;
        // 放行Ctrl/Cmd组合快捷键（全选、复制、粘贴、剪切）
        if ((e.ctrlKey || e.metaKey) && ['a', 'c', 'v', 'x'].includes(e.key.toLowerCase())) return;
        // 非数字按键直接拦截
        if (!/^\d$/.test(e.key)) e.preventDefault();
        // 长度达10位上限时，拦截新增输入操作
        if (this.value.replace(/\D/g, '').length >= 10) e.preventDefault();
    });

    // 实时输入兜底过滤：防止非法内容通过输入法/其他路径写入
    targetInput.addEventListener('input', function () {
        const validVal = this.value.replace(/\D/g, '').slice(0, 10);
        this.value = validVal;
    });

    // 粘贴事件处理：自动过滤非数字内容，截断到长度上限
    targetInput.addEventListener('paste', function (e) {
        e.preventDefault();
        // 读取粘贴文本
        const pasteContent = (e.clipboardData || window.clipboardData).getData('text');
        // 清洗非数字字符+截断长度
        const validPaste = pasteContent.replace(/\D/g, '').slice(0, 10);
        // 按光标位置插入清洗后的内容
        const cursorStart = this.selectionStart;
        const cursorEnd = this.selectionEnd;
        const originVal = this.value;
        this.value = (originVal.slice(0, cursorStart) + validPaste + originVal.slice(cursorEnd)).slice(0, 10);
        // 触发input事件同步状态
        this.dispatchEvent(new Event('input'));
    });
});

最终满足的需求点 #

• 输入框默认上下调节箭头完全隐藏，视觉上与普通文本输入框一致
• 手动输入仅支持0-9数字，原生number框默认允许的e/+/-/.等非数字字符会被直接拦截
• 输入长度满10位后无法继续新增内容
• 粘贴任意混合内容时自动剔除所有非数字字符，最终保留内容长度不超过10位
• 保留服务端RegularExpressionValidator校验作为兜底，防止前端逻辑被绕过，安全性有保障

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