应使用 input 事件实时监听字数并触发警告，因其覆盖所有文本变更场景（含粘贴、ime 确认等），而 keyup 和 change 均不满足实时性要求；需结合 maxlength（浏览器截断）与 data-limit（js 判断）保持一致，并用独立 dom 元素展示警告，避免禁用输入框，提交前须再次校验。
输入框实时监听字数并触发警告
直接用 input 事件监听用户输入最可靠，keyup 会漏掉粘贴、剪切、拖入等操作，而 input 覆盖所有文本变更场景。别用 change——它只在失焦时触发，完全不符合“实时警告”需求。
关键点：必须同时处理初始值（比如表单回填）、粘贴（paste 事件虽可监听，但 input 已自动包含）、以及中文输入法未确认字符（IME）阶段——现代浏览器中 input 在 IME 确认后才触发，正好符合预期，无需额外 hack。
- 监听
input事件，不是keyup或change - 每次触发都读取
element.value.length，不要缓存或依赖 cursor 位置 - 警告逻辑应与长度判断解耦：达到阈值就显示，低于阈值就隐藏，避免状态残留
HTML 结构里必须带 maxlength 和 data-limit 属性
maxlength 是浏览器原生截断依据，但仅防提交超长，不负责提示；真正用于逻辑判断的应是自定义属性如 data-limit="100"。两者要一致，否则用户看到“已超限”却还能继续输入（maxlength 未设），或设了 maxlength 却没同步更新警告文案（data-limit 写错）。
示例结构：
<input type="text" id="title" maxlength="100" data-limit="100"><div class="warning" id="title-warning">字数超出限制</div>
-
maxlength控制实际可输入上限（服务端仍需校验） -
data-limit提供给 JS 读取，避免硬编码，方便多字段复用 - 警告元素初始应
display: none，由 JS 控制显隐，而非靠 class 切换（减少 CSS 依赖）
警告样式要避开 focus 状态干扰
很多开发者把警告文字塞进 input 的 ::placeholder 或用 title 属性弹 tooltip，这既不可控又不满足无障碍要求。正确做法是独立 DOM 元素 + 定位配合，且必须确保：:focus 样式不遮挡警告，警告文字不被 outline 或 box-shadow 溢出覆盖。
- 警告
div放在input同级后方，用margin-top或 flex 布局留空隙 - 避免用
position: absolute叠在 input 上——键盘弹起（移动端）或 zoom 缩放时易错位 - 文字颜色用
#d32f2f（Material 推荐错误色），字号不小于 14px，确保可读
移动端中文输入法下的边界情况
在 iOS Safari 或安卓微信 WebView 中，用户长按输入框选中文字再删除，或用语音输入，都可能让 input 事件触发延迟 100–300ms。此时若警告逻辑写成「立即高亮边框 + 显示文字」，会出现闪烁。稳妥做法是加个 requestAnimationFrame 节流，或简单用 setTimeout(..., 0) 让渲染排队。
更关键的是：别在警告时禁用 input（disabled=true）。用户无法删减字数，反而卡死。只需视觉提示 + 阻止表单提交（在 submit 事件里检查）即可。
- 禁止修改
input.disabled，只做视觉反馈 - 提交前再次校验
value.length > limit，防止绕过 JS 的恶意提交 - 对
textarea同样适用，但要注意换行符占 1 或 2 字节（\nvs\r\n），统一用.length即可，JS 字符串长度按 Unicode 码点计，兼容性好
真正难的不是监听字数，而是让用户清楚知道“现在不能输、为什么不能输、怎么改”，这些细节藏在 warning 文案、焦点管理、和 submit 阻断里——而不是某一行 if (len > 100)。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
