maxlength不能完全拦截超长输入，它仅原生拦截键盘输入和部分粘贴行为，但无法阻止js直接赋值、devtools修改dom或禁用js后的绕过；其本质是ui层轻量约束，非安全边界，服务端必须二次校验。
maxlength 属性真的能拦住超长输入吗
不能完全拦截。它只对用户键盘输入、粘贴（部分浏览器）、以及表单提交前的校验起作用，但无法阻止通过 JavaScript 直接赋值或 DevTools 修改 DOM 的绕过行为。它的本质是 UI 层的轻量级约束，不是安全边界。
常见错误现象：input 允许粘贴 200 字符后仍显示全部内容，但提交时被截断；或者用 document.getElementById('x').value = longString 完全无视 maxlength。
-
maxlength对<textarea></textarea>同样生效，但对contenteditable元素无效 - 设置为
0或负数时，多数浏览器视为无限制（行为未标准化，不建议依赖） - 中文、emoji、代理对（如 ??）按 UTF-16 码元计数，一个 emoji 可能占 2–4 个长度单位
怎么让 maxlength 在粘贴时也生效
原生 maxlength 对 paste 事件默认不做截断，需手动干预。关键是监听 paste 并在 beforeinput 或 input 前清理数据。
推荐做法：在 paste 事件中读取剪贴板文本，截取符合 maxlength 的部分，再用 event.preventDefault() + insertText() 写入：
input.addEventListener('paste', e => {
const max = parseInt(input.getAttribute('maxlength')) || Infinity;
const paste = e.clipboardData.getData('text');
const current = input.value;
const afterPaste = current.slice(0, input.selectionStart) +
paste +
current.slice(input.selectionEnd);
if (afterPaste.length > max) {
e.preventDefault();
document.execCommand('insertText', false, paste.substring(0, max - current.length));
}
});
注意：document.execCommand 已废弃，现代写法应改用 input.setRangeText() 或 input.dispatchEvent(new InputEvent('input'))，但兼容性需按目标浏览器评估。
为什么 input.value.length 不等于用户看到的字符数
因为 maxlength 计的是 UTF-16 码元长度，不是 Unicode 字符数。例如：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
'a'.length === 1，正常 -
'??'.length === 4（代理对 + 连接符），但用户只认作 1 个 emoji -
'?'.length === 2（增补平面汉字）
若业务要求按“视觉字符数”限制（比如短信字数），不能只靠 maxlength。得用正则或 Array.from(str).length 计算真实字符数，并在 input 和 paste 事件里同步校验。
示例判断逻辑：if (Array.from(input.value).length > 10) { /* 截断 */ }，但注意性能——高频输入下避免每次都在 input 事件里调用 Array.from。
服务端必须重复校验 maxlength 限制
前端 maxlength 被绕过太容易，比如禁用 JS、curl 提交、或直接改 POST body。服务端收到数据后，必须用相同规则（UTF-16 长度 or 字符数）做二次截断或拒绝。
常见疏漏点：
- 后端用
len(string)（Python）或string.Length（C#）默认是 UTF-16 长度，与 HTML 行为一致；但 Node.js 的Buffer.byteLength(str, 'utf8')是字节数，不能混用 - 数据库字段长度限制（如
VARCHAR(50)）和前端maxlength="50"必须对齐，否则可能存不进或被静默截断 - API 返回的错误提示要明确指出“超出最大长度”，而不是笼统报“参数错误”
真正起作用的永远是服务端校验，maxlength 只是减少无效请求和提升用户体验的辅助手段。别让它成为你唯一依赖的防线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
