maxlength属性仅静默拦截超限输入，不提供ui反馈；需用javascript监听input和compositionend事件，实时计算并更新剩余字数显示，同时处理粘贴、输入法及跨端兼容问题。
maxlength 属性本身不提示，只静默截断；要实时提示剩余字数，必须用 JavaScript 监听 input 事件并手动更新 DOM。
为什么 maxlength 不会自动显示剩余字数
它只是浏览器原生的输入拦截机制：当用户尝试输入第 maxLength + 1 个字符时，浏览器直接忽略该次输入。它不触发任何 UI 反馈，也不修改页面上其他元素的内容。你看到的“限制”只是表象，背后没有提示逻辑。
常见错误现象：
- 写了
maxlength="100"，但旁边计数文字一直显示 “还可输入 100 字”，直到提交才发现超了 - 用户粘贴一段长文本，
input事件没监听paste，导致计数滞后甚至错乱 - 中文输入法正在组词（如打“zhongguo”未上屏），
input事件不触发，计数卡在旧值
怎么用 JavaScript 实现实时计数和截断
核心是监听 input 和 compositionend，覆盖普通输入、输入法上屏、粘贴等路径。不要只靠 keydown —— 它拦不住粘贴、拖入、IME 上屏。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 用
this.maxLength读取 HTML 中设置的上限值，避免硬编码 - 每次触发时计算
remaining = this.maxLength - this.value.length，再更新提示文案 - 若超限，用
this.value = this.value.slice(0, this.maxLength)截断，slice能正确处理 emoji 和代理对 - 截断后建议调用
this.setSelectionRange(this.maxLength, this.maxLength)，防止光标跳到开头
示例片段：
const textarea = document.querySelector('textarea');
const counter = document.getElementById('counter');
<p>textarea.addEventListener('input', updateCount);
textarea.addEventListener('compositionend', updateCount);</p><p>function updateCount() {
const remaining = Math.max(0, this.maxLength - this.value.length);
counter.textContent = <code>还可输入：${remaining} 字</code>;</p><p>if (this.value.length > this.maxLength) {
const truncated = this.value.slice(0, this.maxLength);
this.value = truncated;
this.setSelectionRange(truncated.length, truncated.length);
}
}</p>
移动端和旧浏览器的兼容性坑
旧版 Safari（iOS 11 及更早）对 textarea 的 maxlength 支持不完整，部分 Android WebView 也会忽略它。不能只信属性，得 JS 兜底。
- 别依赖
onKeyDown做主控：移动端软键盘行为不一致，且无法捕获粘贴 - 监听
paste事件时，要在setTimeout里读value，否则拿到的是粘贴前的旧值 - 如果用了富文本编辑器（如 Quill、Tiptap），
textarea只是容器，maxlength完全失效，得用组件自己的 API 控制 -
maxlength="0"表示不限制，不是禁用；想禁用请用disabled或readonly
服务端校验为什么不能省
maxlength 是纯前端体验层控制，完全可被绕过：禁用 JS、DevTools 修改 DOM、curl 提交、甚至浏览器插件都能跳过它。
- 后端收到数据后，仍需用语言原生方式统计长度（如 Python 的
len(list(graphemes))，JS 的Array.from(str).length） - 数据库字段长度（如 MySQL
VARCHAR(200)）按字节算，UTF8MB4 下一个 emoji 占 4 字节，字段宽度要留足余量 - 最常漏掉的是三者不统一：前端用
.length截断，后端按字节校验，数据库字段又设窄了——用户输到第 97 个字符就莫名被截，查半天发现是字节 vs 字符没对齐
真正难的不是写几行 slice，而是把输入法组合状态、粘贴时机、光标位置、emoji 截断、跨端兼容、前后端长度单位全部对齐。这些细节一错，提示就失真，用户体验就断层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
