需用 oninput 事件配合手动计算实现剩余字符实时反馈，因 maxlength 仅截断不显示；oninput 比 onkeyup 更全面覆盖粘贴等操作；换行符需标准化处理，DOM 节点应缓存以提升性能。
用 input 的 maxlength 和 oninput 实时算剩余字符
直接靠 maxlength 只能截断，没法显示还剩几个字；要实时反馈剩余数，必须监听输入动作并手动计算。关键不是用什么高级 API，而是选对事件和取值方式——oninput 比 onkeyup 更可靠，它覆盖粘贴、剪切、拖入等所有修改场景。
常见错误是用 value.length 却没考虑浏览器对换行符的处理（比如 IE 里 \r\n 算 2 个字符，但某些输入法下实际只占 1 个显示位），不过纯英文/数字场景影响不大。更稳妥的做法是统一用 .replace(/\r\n/g, '\n').length 标准化换行。
- HTML 中写：
<input type="text" maxlength="20" id="title" oninput="updateRemain()"><span id="remain">剩余 20 字</span> - JS 里写：
function updateRemain() { const el = document.getElementById('title'); const remain = el.maxLength - el.value.length; document.getElementById('remain').textContent = `剩余 ${remain} 字`; } - 注意：不要在
oninput里反复调用getElementById，如果频繁触发（如连续输入），建议提前缓存 DOM 节点
textarea 也要同样处理，但要注意 maxlength 兼容性
textarea 的 maxlength 在所有现代浏览器都支持，但老版本 Safari（oninput 里手动截断：if (el.value.length > el.maxLength) el.value = el.value.slice(0, el.maxLength);
另外，textarea 默认允许换行，而换行符长度计算和 input[type="text"] 一致，仍按 \n 或 \r\n 字符数算，不是按“行数”算。
立即学习“前端免费学习笔记（深入）”；
- 别用
innerText读取textarea值，要用value属性，否则粘贴富文本时会出错 - 移动端软键盘弹出时，部分安卓 WebView 不触发
oninput，可加onchange作为兜底（仅在失焦时补一次） - 如果用了 Vue/React 等框架，别直接操作 DOM，改用响应式数据驱动显示，避免手动调用
updateRemain()
用 CSS 让剩余字数提示更友好
纯文字提示容易被忽略，加点样式能提升体验。重点不是炫酷，而是清晰传达状态：快超限时变色、到 0 时禁用输入、负数时标红并阻止提交。
- 在 JS 中动态加 class：
el.classList.toggle('warn', remain - CSS 示例：
.warn { color: #faad14; } .error { color: #f5222d; font-weight: bold; } - 别用
disabled属性锁住input，用户无法删字修正；应该用preventDefault拦截超出部分的输入（需结合keydown+ 判断光标位置，较复杂，一般用截断更稳）
服务端也要校验，前端限制只是体验优化
所有前端字符数限制都可绕过：禁用 JS、改 DOM、抓包重发……所以 maxlength 和实时提示纯粹是给用户看的，后端接口必须独立做长度校验，且规则要和前端一致（比如是否算空格、是否统一换行符）。
容易被忽略的是数据库字段长度和校验逻辑不一致。例如前端设了 maxlength="50"，但 MySQL 字段是 VARCHAR(50)，如果存入含 emoji 的字符串（UTF8MB4 下一个 emoji 占 4 字节），可能实际存不下 50 个字符——这时前端提示“剩余 0”不代表一定能成功提交。
- 前后端共用同一套字符计数逻辑，推荐用 Unicode 码点数（
[...str].length）而非str.length，更准确处理 emoji 和代理对 - 如果后端用 Java，注意
String.length()返回 UTF-16 代码单元数，和 JS 行为一致；Python 3 的len(str)是码点数，需统一
