maxlength是html原生限制方式，对input有效且兼容性好，但无提示；textarea的maxlength在旧ie和移动端有兼容问题，需配合input事件监听截断；三者（html+js+后端）缺一不可。
maxlength 是最直接、最可靠的方式，但仅对 <input type="text"> 有效；<textarea></textarea> 虽然也支持 maxlength（HTML5+），但部分旧版浏览器（如 IE9 及更早）不识别，且它无法阻止 JS 赋值绕过 —— 所以实际项目中必须配合 JavaScript 做二次控制。
input 标签用 maxlength 就够了
单行文本框直接加属性即可，浏览器原生拦截，无需 JS：
<input type="text" name="title" maxlength="50">
-
maxlength对键盘输入、粘贴、拖入等所有用户操作都生效（除 JS 直接赋值） - IE10+、Chrome、Firefox、Safari 全部支持，兼容性没问题
- 注意：它不提供任何提示，超限时光标卡住、无反馈，用户体验差 —— 所以建议额外加 JS 实时计数和截断
- 别和
size混用：size控制显示宽度（字符数），maxlength控制实际可输长度，两者无关
textarea 的 maxlength 要小心用
HTML5 规范允许 <textarea maxlength="200"></textarea>，但实际行为有坑：
- Chrome/Firefox 支持良好；IE10–IE11 部分支持（可能只限制键盘输入，忽略粘贴）
- 即使设置了
maxlength，执行textarea.value = longString仍会突破限制 - 移动端 Safari 对粘贴长文本的拦截有时失效，尤其带 emoji 或换行符时
- 推荐写法：保留
maxlength作兜底，再用input事件监听 + 截断
用 input 事件做实时截断（关键防线）
比 keydown 或 keyup 更可靠，因为它响应所有输入源（键盘、粘贴、拖放、剪贴板、IME 输入）：
const el = document.getElementById('desc');
el.addEventListener('input', function() {
if (this.value.length > 200) {
this.value = this.value.slice(0, 200);
}
});
- 不要用
onkeydown：它发生在值更新前，this.value还没变，判断不准 - 避免用
onpropertychange：IE 专属，已废弃，现代项目不用 - 如果需区分汉字/英文字符（如“1个汉字=2字节”场景），得用正则或
TextEncoder计算实际字节数，不是简单.length - 注意性能：高频触发时，
slice截断开销极小，可放心用
别忘了后端校验这最后一关
前端限制只是体验优化，恶意用户删掉 JS 或发伪造请求，maxlength 和监听逻辑全失效：
- 服务端收到数据后，必须再次检查长度，超长就拒绝或截断
- 数据库字段也要设好长度约束（如 MySQL 的
VARCHAR(200)），防止存储溢出 - 尤其注意：UTF-8 下 emoji、中文、全角符号占多字节，但 JS 的
.length统一按 Unicode 码点计数（基本够用），后端解析时要保持一致
真正可靠的字符限制，是 HTML 层兜底 + JS 层拦截 + 后端层守门，三者缺一不可。最容易被忽略的是：JS 截断后没同步更新实时字数提示，导致界面上显示“199/200”，实际已强制变成“200/200”——这种不一致会让用户困惑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
