input 和 textarea 的 maxlength 属性能直接限制字数，但不自动显示剩余数
浏览器原生支持 maxlength，但它只做截断或禁用输入，不提供“还剩 X 字”这种反馈。用户需要自己监听输入事件、实时计算并更新 DOM。别指望靠一个属性就搞定显示逻辑。
常见错误现象：maxlength 设了但页面没任何计数提示；或者用了 JS 计数，却忘了处理粘贴（paste）、拖入文本、快捷键（如 Ctrl+V）等非键盘输入场景。
- 必须监听
input事件（不是keyup），它覆盖所有输入方式：打字、粘贴、剪切、拖放、自动填充 - 对
textarea要注意换行符：Windows 用\r\n（2 字符），Unix/macOS 用\n（1 字符），但.length统一按 Unicode 码点算，一般无需特殊处理——除非后端校验逻辑和前端不一致 - 中文、emoji、英文都按单个字符计（现代浏览器中，大多数 emoji 是单码点；但像 ?? 这类组合 emoji 会占多个
.length，若后端用不同方式统计，需对齐
用 JavaScript 实时更新剩余字数的最小可行写法
核心就是读取当前值长度、减去 maxlength、更新提示文案。别写成每输一个字就查 DOM 多次，也别在事件里反复绑定。
const el = document.querySelector('textarea[data-counter]');
const counterEl = document.querySelector('[data-counter-display]');
const maxLength = parseInt(el.getAttribute('maxlength'), 10);
<p>function updateCounter() {
const currentLength = el.value.length;
const remaining = maxLength - currentLength;
counterEl.textContent = remaining;
// 可选：剩余 ≤ 0 时加 class 提示超限
counterEl.className = remaining < 0 ? 'counter-over' : 'counter-normal';
}</p><p>el.addEventListener('input', updateCounter);
// 初始渲染一次，避免页面加载后计数为 null
updateCounter();使用场景：表单字段旁放一个 <span data-counter-display></span>，或用 title 属性悬浮显示；不要用 alert 或弹窗干扰输入流。
立即学习“前端免费学习笔记（深入）”；
- 别用
oninput写在 HTML 里，不利于维护和复用 - 如果表单有多个带计数的字段，把
updateCounter改成接收el和counterEl参数的函数，避免重复代码 - 避免在
input回调里调用el.focus()或修改el.value，可能引发光标跳动或输入延迟
IE11 兼容性下 textarea 的 input 事件不触发？得补监听 keyup + paste
IE11 对 textarea 的 input 事件支持不完整：粘贴、右键粘贴、拖放文本不会触发。必须降级兜底。
错误现象：在 IE11 里复制一段文字粘贴进去，剩余字数没变，但实际已超长；用户以为还能输，提交时被后端拒绝。
- 对 IE11，额外监听
keyup（覆盖按键）和paste（覆盖粘贴） - 不用判断 UA，用特性检测更稳：
if (!('oninput' in el)) { /* 补监听 */ } -
paste事件里不能直接读el.value（此时还没更新），要用setTimeout(..., 0)延迟到下一轮事件循环再读
服务端校验和前端计数不一致？优先以服务端为准
前端计数只是体验优化，不是安全边界。用户关 JS、绕过 maxlength、用 curl 提交，都能突破前端限制。后端必须独立校验长度，且用和前端一致的字符计数逻辑（比如都用 UTF-16 code units，或都转成 Unicode scalar values）。
容易踩的坑：前端用 .length，后端用 mb_strlen($str, 'UTF-8')（PHP）或 len()（Python，默认按 Unicode 字符），结果 emoji 或生僻汉字计数差 1 —— 用户明明看到“还剩 1 字”，提交却报错“超出 50 字”。
- 前后端字符计数方式必须对齐，建议统一用“Unicode 字符数”（即 JavaScript 的
.length所表示的） - 如果后端用数据库字段限制（如 MySQL
VARCHAR(50)），注意 MySQL 的 utf8mb4 下一个 emoji 占 4 字节，但字符数仍是 1 —— 字段长度限制的是字符数，不是字节数 - 别在前端隐藏“超限仍可提交”的按钮，而应在提交前检查
el.value.length > maxLength并阻止表单提交
最麻烦的其实是中英混排 + emoji + 换行 + 用户粘贴富文本（带不可见控制字符）的情况。这时候字符数和视觉长度完全不是一回事，但用户只认“还能打几个字”。老老实实按 .length 算，别试图“智能过滤格式字符”——那只会让前后端更难对齐。
