做表单的时候，输入限制是绕不开的一环。无论是注册页面的手机号输入框，还是后台系统的金额填写，如果不在前端做好限制，用户随手敲几个字母或者粘贴一大段乱码进来，后端校验再严也架不住体验稀烂。这篇文章就把限制input输入类型的常用手段梳理一遍，从最简单的HTML属性讲到JavaScript方案，再附上几个开发中高频出现的坑，帮你把输入限制这件事彻底搞明白。
一、HTML原生属性：最省事的限制方式
HTML5给input标签提供了type属性，改一个值就能实现大部分基础限制。比如type="number"只允许输入数字，type="tel"在手机上会调起数字键盘，type="email"自带邮箱格式校验，配合form提交时浏览器会自动拦截格式不对的内容。
除了type，还有maxlength限制最大字符数、min和max限制数值范围、step控制步长。比如，用户在浏览器里用上下箭头调整数值时，只能落在0到100之间、每次变化10。这些原生属性的好处是零JS代码、性能好、语义清晰，缺点是限制粒度比较粗，比如number类型照样允许输入e和负号，maxlength对number类型还完全不生效，这点后面细说。
二、JavaScript实时过滤：精细控制的必备手段
当原生属性满足不了需求，就要靠JS在输入事件里做过滤。常见写法是监听input事件，用正则把不合法的字符替换掉：
this.value = this.value.replace(/[^\d]/g, '')，这一行代码就能让输入框只保留数字，其他字符一输入就被抹掉。如果想限制只能输入数字和小数点，且小数点只能有一个，正则可以写成先替换非数字非点字符，再判断点的数量，超过一个就删掉多余的小数点。
更进一步，限制小数保留两位的场景，可以用replace(/^(\d+(\.\d{0,2})?).*/,'$1')这类正则在input事件里实时截断。需要注意的是，直接改value不会触发input事件，所以手动赋值是安全的，不会造成死循环。另外别忘了处理blur事件做兜底校验，比如末尾只输入了一个点的情况，失焦时把它清掉或补全为0。
三、粘贴与拖拽：容易被忽略的入口
很多人只处理了键盘输入，结果用户一粘贴，乱七八糟的内容照样进来了。所以onpaste和ondrop事件必须一并处理。常见做法是在onpaste里先阻止默认行为，读取剪贴板文本，过滤后再赋值给输入框，这样无论用户粘贴什么，最终留下来的都是合法内容。
拖拽同理，ondrop事件也要preventDefault，然后走同一套过滤逻辑。建议把过滤函数抽出来复用，键盘输入、粘贴、拖拽三个入口统一调用，避免逻辑不一致导致某个入口漏防。
四、常见问题与坑点解答
问题1：maxlength对type="number"为什么不生效？这是HTML规范设计如此，number类型的输入框maxlength属性会被忽略。解决办法有两个：要么改用type="text"配合inputmode="numeric"，用JS限制长度；要么在input事件里判断value.length手动截断。
问题2：中文输入法下，输入拼音过程中就触发了校验怎么办？这是compositionstart、compositionupdate、compositionend三个事件的用武之地。在compositionstart时设一个标记为true，跳过校验逻辑，等compositionend触发后再统一处理。不做这个处理，用户打拼音时输入框会被正则误清空，体验极差。
问题3：手机端怎么调起数字键盘？type="number"在部分安卓机型上体验不佳，更推荐type="text"加inputmode="decimal"，既能调起带小数点的数字键盘，又保留了text类型对maxlength的支持，是目前兼容性最好的组合。
问题4：如何限制只能输入中文或只能输入英文？用Unicode范围正则即可。只留中文用[^\u4e00-\u9fa5]替换，只留英文用[^a-zA-Z]替换，思路和数字限制完全一致。
五、方案对比与选型建议
| 方案 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| 原生type属性 | 基础格式限制 | 零代码、语义好 | 粒度粗、有兼容差异 |
| JS正则过滤 | 精细规则限制 | 灵活可控 | 需处理输入法等细节 |
| inputmode属性 | 移动端键盘定制 | 键盘体验好 | 不做实际校验 |
| 组件库方案 | 中大型项目 | 功能完善统一 | 引入依赖成本 |
实际项目中，推荐原生属性打底、JS过滤兜底的组合拳：type和inputmode负责键盘体验和基础语义，input事件里的正则负责真正的字符过滤，paste和drop事件堵住旁路入口，最后blur时再做一次格式修正。这套组合下来，绝大多数输入限制需求都能稳稳覆盖，后端校验依然不能省，但前端这层做好了，用户体验和数据质量都能上一个台阶。