maxlength仅对type="text"、"search"、"url"、"tel"、"email"、"password"及<textarea>生效；对number等类型无效，且需JS配合实现可靠截断与输入法兼容。
maxlength 属性不是万能的，它只对特定 type 生效，且无法阻止粘贴、中文输入法上屏前的超长内容——真要可靠截断，必须配合 JavaScript。
哪些 input type 支持 maxlength？
只对语义上表示「纯文本输入」的类型起作用：
-
type="text"、type="search"、type="url"、type="tel"、type="email"、type="password"✅ -
type="number"、type="date"、type="range"、type="checkbox"❌（浏览器直接忽略，不报错也不拦截） -
<textarea>✅（唯一支持多行的原生方案，换行符也计入长度）
常见错误：<input type="number" maxlength="3"> 看似写了，实际完全没用。应改用 max="999" + JS 拦截非数字，或换回 type="text" 并监听 input 事件。
maxlength 的字符数到底怎么算？
它按 Unicode 码点（code point）计数，不是 JavaScript 的 .length（后者统计 UTF-16 编码单元）：
立即学习“前端免费学习笔记（深入）”；
- 英文、数字、常见标点、中文汉字：1 字符 = 1 码点 →
maxlength="10"可输 10 个汉字 - emoji（如
??、?）或某些生僻字：占 2–4 码点 → 同样maxlength="10"下可能只能输 2~3 个就满额 - 组合字符（如
é预组合形式）：1 码点；但若用e\u0301拼成，则算 2 码点
这意味着：用 el.value.length > 10 截断 ≠ maxlength="10" 行为。若需严格匹配用户视觉长度，必须用 Array.from(el.value).length > 10。
为什么中文输入时 maxlength 像“没反应”？
因为 DOM 的 value 只在输入法确认上屏后才更新，候选区拼音（如“zhongguo”）不算入长度统计——这不是 bug，是规范行为。
若需实时限制（比如防用户打到一半才发现被截），得配合 JS：
- 监听
input事件（覆盖粘贴、语音、拖拽等所有修改方式） - 加判断
if (!event.isComposing)，避免打断输入法组合逻辑 - 移动端 WebView（尤其旧版 iOS Safari）触发时机不一致，建议同时监听
compositionend
示例代码：
<input type="text" id="limited" maxlength="10">
<script>
const el = document.getElementById('limited');
el.addEventListener('input', () => {
if (el.value.length > 10) {
el.value = el.value.slice(0, 10);
}
});
el.addEventListener('compositionend', () => {
if (el.value.length > 10) {
el.value = el.value.slice(0, 10);
}
});
</script>
后端校验为什么不能省？
maxlength 是纯前端限制，绕过极其容易：
- 禁用 JS 后直接失效
- 用 DevTools 删除属性或修改 HTML
- 构造 POST 请求跳过表单交互
数据库字段长度、API 接口定义才是硬边界。前端限制只是体验优化，服务端必须重新校验 Array.from(value).length，否则可能引发截断存储、索引异常或下游系统报错。
真正关键的不是加不加 maxlength，而是确认它是否出现在正确的标签和类型上，并意识到它从不替代服务端校验——尤其当输入内容涉及存储、索引或下游系统约束时。
