表单提交时必须用 array.from(value).length 校验字符数而非 value.length 或 maxlength——因后者不参与提交校验、易被绕过，且无法正确处理 emoji 等复合字符；submit 中应阻止默认行为、聚焦输入框、精准截断并给出明确字数提示。
表单提交时不能只靠 maxlength 判断是否超限，必须用 JavaScript 主动读取 value 并计算字符数——因为 maxlength 不参与提交校验逻辑，也不暴露当前长度。
为什么 submit 事件里不能直接信 maxlength
maxlength 是纯 UI 层约束，浏览器不会在 submit 时自动检查它是否被绕过。用户可能通过以下方式让输入框内容超出限制：
- 用 JS 直接赋值：
el.value = '超长内容'，maxlength完全不拦截 - 粘贴富文本（含 HTML 标签），
value.length突然暴涨 - 中文输入法未确认前的临时状态虽不影响 input 事件，但若在 submit 前强行读值，可能拿到残留拼音或空字符串
提交前该用 Array.from(value).length 而不是 value.length
对 emoji、生僻汉字、带修饰符的肤色 emoji（如 ??），value.length 返回的是 UTF-16 码元数，不是用户感知的“字符数”。例如：
"??".length // → 4（实际显示为 1 个字符）
Array.from("??").length // → 1
前后端若都按 Array.from(str).length 计算，才能避免“前端显示没超、后端拒绝”的问题。尤其当后端用 Python len() 或 Node.js Array.from() 时，必须同步前端逻辑。
如何在 submit 事件中安全截断并反馈
不要在 submit 里直接 el.value = el.value.slice(0, n) —— 这会破坏光标位置，且用户看不到发生了什么。正确做法是：
- 先用
Array.from(el.value).length获取真实字符数 - 若超限，阻止默认提交：
event.preventDefault() - 聚焦到输入框，并滚动到可视区域：
el.focus(); el.scrollIntoView({block: 'nearest'}); - 用
el.setRangeText()或el.setSelectionRange()把光标移到末尾，再手动截断（需记录原光标位置，否则粘贴后光标乱跳） - 提示文案别写“已超限”，改用“最多支持 100 字，已输入 102 字”——明确告诉用户差多少
框架里（Vue/React）提交时怎么拿真实字数
在响应式框架中，直接读 DOM 的 value 可能滞后于数据状态。必须确保你读的是最新绑定值：
- Vue：用
v-model绑定的 ref，直接取ref.value，别去 DOM 里读el.value - React：用
useState管理的值，提交时直接用该 state，前提是每次onChange都做了长度过滤（否则 state 本身已超限） - 关键点：如果用了自定义 hook 封装字数限制，务必让它返回截断后的值，而不是只做视觉提示
最易被忽略的是：移动端语音输入、手写输入、第三方键盘插件可能绕过所有前端事件监听，它们触发的 input 事件延迟不可控，所以 submit 时的兜底校验不是补充，而是必选项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
