maxlength 和 minlength 仅对 text、password、email、tel、url、search 类型的 input 及 textarea 有效；number、date、range、checkbox、file 等类型完全忽略该属性。
maxlength 和 minlength 是 HTML 原生属性，但它们的行为和适用范围远不如表面看起来简单——它们只在特定类型上生效、不参与默认表单校验、也不能真正“阻止”粘贴或绕过操作。
哪些 input 类型支持 maxlength 和 minlength
这两个属性**仅对文本类输入控件有效**：
-
type="text"、type="password"、type="email"、type="tel"、type="url"、type="search" -
<textarea></textarea>（也支持，但粘贴行为不可靠）
以下类型**完全忽略**这些属性，写了也无效：
-
type="number"：用户仍可输入任意位数；应改用min/max+ JS 校验 -
type="date"、type="range"、type="checkbox"、type="file"
注意：type="search" 默认 maxlength="524288"，几乎等同于不限制。
maxlength 不会截断已存在的超长值
设置 maxlength="5" 后，浏览器只在**新增输入时拦截**，不会主动修正已有内容：
- 用户手动输入 6 个字符 → 第 6 个被静默拒绝（
input事件都不触发） - 但若通过 DevTools 或 JS 动态设
el.value = "123456"，该值会保留，且表单仍可提交 - 修改
el.maxLength属性本身不会重置当前value，必须手动el.value = el.value.slice(0, el.maxLength)
这意味着：仅靠 HTML 属性无法保证 DOM 值合规，尤其在动态更新场景下。
表单提交时 maxlength 默认不校验
调用 form.checkValidity() 或点击 <input type="submit"> 时，浏览器**默认不检查 maxlength**：
- 它只响应
required、pattern、min/max（对 number/date）等显式验证属性 - 即使
value.length > el.maxLength，表单也能成功提交 - 想让它参与校验，必须用 JS 主动设置：
el.setCustomValidity(value.length > el.maxLength ? "超出最大长度" : "")，并在input事件中同步更新 - 更省事的做法：用
pattern=".{" + min + "," + max + "}"（如pattern=".{"1,10}"），这样原生验证就会触发提示
textarea 的粘贴与光标问题
<textarea maxlength="100"></textarea> 在移动端和部分 WebView 中表现不稳定：
- 用户 Ctrl+V 粘贴 200 字符 → 多数浏览器插入全部内容，然后才触发
input事件 - 此时
el.value.length > 100已成事实，JS 截断el.value = el.value.slice(0, 100)会重置光标到末尾 - 如需保留光标位置，得用
el.setSelectionRange()或更安全的el.setRangeText() - 屏幕阅读器可能感知不到变化，建议配合
aria-live="polite"提示剩余字数
真正可靠的长度控制永远在服务端——前端所有限制都只是用户体验层的辅助，不是防线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
