maxlength仅对text、search、url、tel、email、password类input有效，number和date等类型无效；限制字符数（非字节数），中文、英文、emoji均计为1；需js配合光标控制与服务端校验才能可靠使用。
maxlength属性能直接限制输入字符数，但只对text、search、url、tel、email、password类型有效
不是所有 input 类型都支持 maxlength。比如 type="number" 或 type="date" 加了也无效，浏览器会忽略——这常导致开发者误以为属性写错了。真正起作用的只有文本类输入控件。
常见可用场景包括：input[type="text"]、input[type="email"]、input[type="password"] 等。注意：它限制的是“字符数”，不是字节数，中文、英文、emoji 都算 1 个字符。
-
maxlength="10"表示最多输入 10 个字符，第 11 次按键（含粘贴）会被截断 - 用户仍可聚焦、选中、删除，只是无法新增超出长度的内容
- 该属性是 HTML5 原生行为，无需 JS 即可生效，且对屏幕阅读器友好
用 JavaScript 监听 input 事件做二次校验时，别直接改 value，要用 setSelectionRange
单纯靠 maxlength 不够可靠：用户可能通过粘贴、拖拽、开发者工具绕过。想彻底拦截，需 JS 配合。但直接赋值 input.value = input.value.slice(0, 10) 会导致光标跳到末尾，体验极差。
正确做法是在 input 事件中检测超长后，先保存光标位置，再截断，最后用 setSelectionRange 恢复光标：
input.addEventListener('input', () => {
if (input.value.length > 10) {
const pos = input.selectionStart;
input.value = input.value.slice(0, 10);
input.setSelectionRange(
Math.min(pos, 10),
Math.min(pos, 10)
);
}
});
textarea 的 maxlength 行为和 input 一致，但要注意换行符在不同系统中的字符计数差异
textarea 同样支持 maxlength，逻辑与 input 完全相同。但要注意：Windows 下换行是 \r\n（2 字符），macOS/Linux 是 \n（1 字符）。用户在跨平台编辑时，同一段文字在不同系统下可能触发或不触发长度限制。
- 若后端按 UTF-8 字节校验，前端仅用
maxlength可能不一致（如 emoji 占 4 字节但只算 1 字符） - 服务端必须独立校验，不能信任前端
maxlength或 JS 截断 - 显示剩余字数时，建议用
input.value.length计算，和maxlength逻辑对齐
移动端软键盘回车键失效？可能是 maxlength 导致表单提前提交
某些 Android 浏览器（尤其旧版 WebView）在 input 达到 maxlength 后，软键盘回车键会变成“搜索”或“发送”，并意外触发表单提交。这不是 bug，而是浏览器把“已满”状态当作了“可提交”信号。
- 临时缓解：给
form加onsubmit="return false"或监听submit阻止默认行为 - 根本解决：避免让关键字段（如搜索框）恰好卡在
maxlength边界；预留 1–2 字符余量 - 更稳妥的方式是用
inputmode="text"显式声明输入意图，部分新浏览器会据此优化软键盘行为
maxlength 是第一道防线，但它的静默截断和平台差异容易被忽略。真正要稳，得前后端双校验 + 光标控制 + 软键盘适配，缺一不可。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
