maxlength是限制输入字符数最直接的方式，适用于文本类输入框，但对number类型无效，且需服务端校验；字节限制需js配合textencoder处理paste等场景；pattern仅提交时校验，实时控制需结合input事件与光标管理。
用 maxlength 属性直接限制输入字符数
这是最常用、最直接的方式，适用于纯长度控制（比如账号通常限制在 6–20 位）。maxlength 是 input 的原生属性，浏览器会自动截断超出部分，且不触发 JavaScript 事件。
常见错误是把它和 size 混淆——size 只控制显示宽度（字符个数），不影响实际输入长度。
-
maxlength对type="text"、type="password"、type="email"等文本类输入有效，但对type="number"无效（数字输入框不按字符计，需用 JS 配合） - 中文、英文、数字、符号均按「字符」计数，一个汉字 = 1 个长度单位
- 服务端仍需校验：前端限制可被绕过（如禁用 JS 或直接发请求）
<input type="text" name="username" maxlength="16" placeholder="请输入账号（最多16位）">
需要区分「字节数」时必须用 JavaScript 补充
某些后端接口或存储要求按字节限制（例如 UTF-8 下一个汉字占 3 字节），而 maxlength 无法满足。这时得监听输入并手动截断。
关键点在于：不能只监听 input 事件，还要处理粘贴（paste）、拖入、IME 输入等场景。
- 推荐在
input和paste两个事件里统一调用校验函数 - 获取字节数用
new TextEncoder().encode(value).length（现代浏览器），兼容旧版可用value.replace(/[^\x00-\xff]/g, "xx").length - 截断后要手动设置
input.value并触发input事件，否则 Vue/React 等框架可能不同步
const input = document.querySelector('input[name="username"]');<br>const MAX_BYTES = 32;<br><br>function truncateByBytes(el) {<br> const value = el.value;<br> const byteLen = new TextEncoder().encode(value).length;<br> if (byteLen > MAX_BYTES) {<br> let truncated = value;<br> while (new TextEncoder().encode(truncated).length > MAX_BYTES) {<br> truncated = truncated.slice(0, -1);<br> }<br> el.value = truncated;<br> }<br>}<br><br>input.addEventListener('input', () => truncateByBytes(input));<br>input.addEventListener('paste', (e) => setTimeout(() => truncateByBytes(input), 0));
配合正则做格式 + 长度双重校验
仅限长度不够安全：账号常需排除空格、特殊符号或强制字母+数字组合。pattern 属性可声明正则，但注意它只在表单提交时校验，不实时拦截输入。
真正要「边输边控」，得结合 input 事件 + RegExp.test()，但别在每次输入都暴力 replace —— 会影响光标位置和用户体验。
- 推荐策略：允许输入，但输入完成后（如失焦或提交时）高亮提示；若必须实时清理，用
el.setSelectionRange()保存并恢复光标位置 -
pattern的正则写法要注意：它默认是「全匹配」，即等价于^...$，不用额外加首尾锚点 - 移动端软键盘可能因 pattern 改变类型（如
pattern="[0-9]*"会唤出数字键盘），这是副作用，不是 bug
<input type="text"> name="username"<br> maxlength="16"<br> pattern="[a-zA-Z0-9_]{3,16}"<br> title="仅支持字母、数字、下划线，3–16位">
移动端 iOS 的 maxlength 兼容性坑
iOS Safari 在某些版本（特别是 15.x 早期）中，对 maxlength 的响应有延迟：用户快速连击输入时，可能短暂超出限制再被截断，导致 UI 闪烁或光标跳动。
这不是 bug，而是 WebKit 对 IME 输入的处理机制所致。单纯加 JS 截断不一定能根治，需组合处理。
- 给
input加autocomplete="off"和autocapitalize="none"可减少部分干扰 - 避免在
input事件里频繁读写value，改用setRangeText()替代直接赋值，更稳定 - 如果业务允许，可降级为「提交时校验 + 友好提示」，比强控体验更可靠
复杂点往往不在怎么写，而在要不要写——很多所谓“输入限制”，其实该交给后端兜底，前端只做轻量提示。强行用 JS 拦截所有边界情况，反而容易引入光标错乱、粘贴失效、IME 兼容等问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
