maxlength属性不能真正可靠限制输入，仅对文本类input有效且不阻止粘贴超长内容；需配合js监听input事件+截断逻辑，并处理ime、移动端等特殊场景。
maxlength属性在input中是否真的能限制用户输入
能，但仅对文本类 <input> 有效，且只限制字符数（不是字节数），不阻止粘贴超长内容——浏览器会自动截断，但这个截断行为不可控、不触发事件，容易导致表单校验和 UI 状态不一致。
常见错误现象：maxlength="10 的输入框，用户粘贴 15 个字符后看起来“只显示前10个”，但焦点离开时 input.value 仍是 15 个（尤其在 Safari 和旧版 Chrome 中）；或者用 JS 动态修改 maxlength 后，已输入内容未被清理。
-
type="text"、type="search"、type="tel"、type="email"、type="password"支持maxlength -
type="number"、type="date"、type="checkbox"等不支持，设了也无效 - 中文、emoji、组合字符（如带声调的 á）都按 1 个字符计数，和 UTF-8 字节数无关
如何让 maxlength真正生效且行为可预测
单纯依赖 HTML 属性不够，必须配合 JS 监听 + 截断逻辑。关键是捕获所有可能绕过 maxlength 的路径：粘贴、拖拽插入、IME 输入完成、以及移动端软键盘的“确认”行为。
推荐做法是监听 input 事件（不是 change），并在每次触发时强制截断：
const input = document.querySelector('input[maxlength]');
input.addEventListener('input', () => {
const max = parseInt(input.getAttribute('maxlength'), 10);
if (input.value.length > max) {
input.value = input.value.slice(0, max);
}
});
注意：不要用 keydown 或 keypress 做截断，它们无法处理粘贴和 IME；也不要只靠 onpaste，它漏掉拖拽和部分移动端行为。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
与表单验证和后端校验的关系
maxlength 是纯前端提示性约束，不影响 required 或 pattern 的验证逻辑，也不改变 checkValidity() 的结果。它只是防止用户输得太多，但不能替代业务规则校验。
- 前端 JS 截断后，记得同步更新
input.selectionStart和selectionEnd，否则光标会跳到末尾，影响连续编辑体验 - 后端必须独立校验长度，因为任何前端限制都可被绕过（禁用 JS、改 DOM、发 raw 请求）
- 如果后端要求的是字节长度（比如 MySQL
VARCHAR(255)存 utf8mb4），前端用maxlength无法准确对应，此时应以服务端返回的错误为准
移动端和特殊输入法下的坑
在 iOS Safari 和部分安卓 WebView 中，中文拼音输入法下，用户选词完成前 input.value 可能为空或为拼音串，input 事件会高频触发；此时直接截断会导致输入中断或错乱。
稳妥做法是加一个简单防抖，并区分输入状态：
let isComposing = false;
input.addEventListener('compositionstart', () => isComposing = true);
input.addEventListener('compositionend', () => isComposing = false);
input.addEventListener('input', () => {
if (isComposing) return;
// 执行截断逻辑
});
另外，iOS 上长按粘贴有时会触发两次 input，一次是“粘贴中”（值为空），一次是“粘贴完成”，需确保截断逻辑幂等。
真正难处理的不是长度本身，而是不同输入场景下“什么时候算输入完成”——这个边界模糊，得靠组合事件 + 状态标记来逼近。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
