必须用 input 事件，因它覆盖粘贴、语音、输入法上屏等所有编辑路径，而 keyup 漏粘贴且提前计数，change 失焦才触发；array.from(value).length 精确统计字符，maxlength 原生截断最稳。
直接用 input 事件监听 textarea 或 input[type="text"]，配合 value.length 或 Array.from(value).length 就能实现真正可用的实时统计——其他方案要么漏粘贴，要么卡在输入法上屏前，要么移动端根本失效。
为什么必须用 input 事件而不是 keyup 或 change
用户粘贴文字、拖入文本、用语音输入、甚至 iOS 长按粘贴，keyup 全部捕获不到；change 要等失焦才触发，用户写完 300 字才发现超限，体验断裂。input 是唯一在值真正变更后立即触发的事件，覆盖所有编辑路径，包括中文输入法“上屏”那一刻。
- IE11+、Chrome、Firefox、Safari（含 iOS）均原生支持，无需 polyfill
- 不会在拼音未确认时提前计数（
keyup会） - 不依赖光标位置或按键状态，逻辑干净
textarea 和 input[type="text"] 的字符数怎么算才准
value.length 对绝大多数场景够用，但遇到 emoji（如 "??"）或某些组合字符时，JS 字符串的 UTF-16 码元数会大于用户感知的“1 个字”。此时应改用 Array.from(value).length，它能正确处理代理对和扩展字符。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 中文、英文、数字、标点、空格、
\n都按 1 字计入——这是用户真实预期，别自动trim()或过滤 - 如果后端校验按字节（如 MySQL
utf8mb4），前端可用new TextEncoder().encode(value).length模拟，但仅作提示，不可替代服务端校验 - 别用
innerText或innerHTML读取值——对表单控件无效，且会引入格式干扰
DOM 更新和 maxlength 怎么配合才不翻车
HTML 原生 maxlength 属性优先级最高，浏览器会自动截断，比 JS 手动 substring 更稳。JS 只负责更新显示和视觉反馈，不要干预输入流本身。
- 给
textarea加maxlength="200"，同时用 JS 显示"198/200"，超限时加class="over-limit"改变颜色 - 别在
input回调里直接el.value = el.value.slice(0, 200)——会破坏光标位置，尤其在 iOS Safari 上极易失焦 - 确保计数器 DOM 元素存在：先
const counter = document.getElementById("char-count")，为null就return，避免Cannot set property 'textContent' of null
中文输入法下怎么避免计数跳变
输入法组合过程中（如打 “zhongguo” 还没按空格），value 不变，input 不触发，这是正常行为。强行加 compositionstart/compositionend 监听反而容易引入状态混乱，实际项目中极少需要。
- 只要上屏后立刻更新，用户基本无感；频繁抖动的提示反而更干扰
- 若产品强要求“组合中也显示”，需结合
compositionstart暂停计数 +compositionend强制重算，但务必加防抖，否则连打拼音会触发多次 - 真正容易被忽略的是：iOS Safari 对
maxlength在某些富文本场景下支持不一致，所以“原生限制 + 视觉提示 + 服务端二次校验”三层缺一不可
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
