maxlength属性最省事，仅对text、search、url、tel、email、password和textarea有效；type="number"等不支持类型需JS补位；须前后端校验+字符计数口径统一。
直接用 maxlength 属性最省事
绝大多数场景下，给 <input type="text"> 或 <textarea> 加上 maxlength="10" 就够了。浏览器会在用户输入第 11 个字符时自动拦截——不是“输进去再删”，而是根本无法触发输入，没有闪烁、不卡顿、不依赖 JS。
常见错误包括：max-length（拼错）、加在 <div> 上（只对表单元素生效）、或者误用于 type="number"（该类型忽略 maxlength）。
-
maxlength对中文、英文、数字、emoji（部分）都按“字符”计数，和大多数后端逻辑一致 - 移动端软键盘会响应：iOS 达到上限后禁用输入键，Android 多数也会灰掉粘贴按钮
- 它和框架（React/Vue/Angular）完全兼容，不影响受控组件逻辑或表单状态管理
maxlength 不起作用？先看是不是用了不支持的类型
maxlength 只对 text、search、url、tel、email、password 和 textarea 有效。如果你写了 <input type="number" maxlength="4">，浏览器直接无视——这不是 bug，是规范行为。
类似地，date、file、range 等类型也不认 maxlength。此时必须用 JS 补位：
立即学习“前端免费学习笔记（深入）”；
- 监听
input和paste两个事件（仅input会漏掉粘贴） - 截断用
el.value = el.value.slice(0, limit)，别用正则替换，避免误伤 emoji 代理对 - type="number" 的
value始终是字符串，所以.length是字符长度，不是数值大小
需要实时显示剩余字数？JS 监听 input 事件就行
原生 maxlength 不提供 UI 反馈。要显示“还可输入 3 个字符”，只需绑定 input 事件：
<input type="text" id="title" maxlength="20">
<span id="counter">还可输入 20 个字符</span>
<p><script>
const input = document.getElementById('title');
const counter = document.getElementById('counter');
input.addEventListener('input', () => {
const max = parseInt(input.getAttribute('maxlength'));
const remaining = max - input.value.length;
counter.textContent = <code>还可输入 ${remaining} 个字符</code>;
});
</script>注意：input 事件能捕获粘贴、拖放、语音输入等所有变更；keyup 或 change 都不合适。
服务端校验不是可选项，是必做项
前端 maxlength 可被轻易绕过：禁用 JS、手动删掉属性、curl 直接发请求……后端收到数据后，必须重新计算字符长度并拒绝超长内容。
容易被忽略的是字符计数口径差异：
- 前端
.length按 UTF-16 码元计数，一个 emoji（如 ??）可能算 2 - 某些后端语言（如 Python）默认按 Unicode 码点计数，?? 算 1；若不统一，50 字限制可能在前后端表现不一致
- 换行符
\n在<textarea>中算 1 个字符，前后端需保持一致
真正安全的长度控制，永远是「前端防误 + 后端把关 + 口径对齐」三者缺一不可。
