maxlength 属性的作用是阻止输入而非截断，它在用户敲键瞬间拦截超出长度的字符，使 input.value 始终不超限；仅对文本类 input 类型生效，js 动态设置后需手动清理超长内容，服务端必须二次校验。
maxlength 属性的作用不是“截断”，而是“阻止输入”——它在用户敲键瞬间就拦截超出长度的字符，浏览器根本不让那些字符进入 input 或 textarea 的值中。
为什么说 maxlength 不是截断而是拦截
很多人误以为 maxlength 像后端字符串截取一样“先收再砍”，实际它是纯前端的输入级限制：
- 用户在
input type="text"中已输入 5 个字符，maxlength="5"时，第 6 次按键（包括粘贴、拖入、IME 组词完成）会被浏览器直接忽略，input.value始终保持为 5 个字符 - 该行为由浏览器原生实现，不触发
input或change事件，也无需 JS 监听干预 - 粘贴整段超长文本时，浏览器会自动裁剪到上限长度后插入，而非插入后再截断 DOM 值
哪些 input type 支持 maxlength
maxlength 只对**文本类输入控件**生效，不同 type 行为差异明显：
- ✅ 有效：
type="text"、type="search"、type="url"、type="email"、type="tel"、type="password"、<textarea></textarea> - ❌ 无效：
type="number"、type="range"、type="date"、type="checkbox"、type="file"—— 这些类型不按字符计数，maxlength被完全忽略（即使写了也不报错） - ⚠️ 注意：
type="search"默认maxlength="524288"，数值极大，几乎等同于不限制
JS 动态设置 maxLength 时的坑
用 JS 修改 element.maxLength 看似简单，但容易忽略两个关键点：
- 修改后不会自动清理已有超长内容：若当前
input.value已有 12 个字符，你把maxLength设为 8，DOM 值仍为 12，只是后续无法再输入 —— 必须手动截断：input.value = input.value.slice(0, 8) - 设为
0表示“无限制”（仅限部分环境，如 .NET WebForms 的HtmlInputText.MaxLength），但标准 HTML 中maxlength="0"是非法值，浏览器会当作缺失处理，等效于不限制；真正要禁用输入得用disabled或readonly - IE 和旧版 Edge 对
maxlength的粘贴处理不一致：某些版本下粘贴超长内容可能只截前半段，建议在input事件后加校验兜底
和 size、min/max、pattern 的关系别搞混
maxlength 和其他属性常被一起用，但职责完全不同：
-
size控制的是输入框**视觉宽度**（以字符为单位），和长度限制无关；size="10"+maxlength="3"完全合法 -
min/max对type="number"限制数值范围，和字符长度无关；对文本类输入无效 -
pattern是正则校验，发生在表单提交或调用checkValidity()时，不阻止输入；而maxlength是实时拦截 - 服务端永远不能信任
maxlength：它可被禁用 JS 或绕过 DOM 直接发请求绕过，后端必须重新校验长度
最易被忽略的一点：中文输入法下，maxlength 计的是 Unicode 字符数，不是字节数，也不是“可见字数”。比如一个 emoji（如 ??）可能占多个码点，但通常算作 1 个字符；而某些组合型汉字或罕见符号可能被计为 2+ 字符。真要精确控制显示长度，得结合渲染测量或富文本编辑器逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
