HTML本身不支持实时字数统计，需用JavaScript监听input和compositionend事件，以Array.from(text).length准确计算Unicode字符数，并兼顾中文、emoji及输入法兼容性。
HTML 字数统计本身不提供实时计数能力，必须靠 JavaScript 主动监听输入事件并更新显示——不是 HTML 能做的事，而是你得写 JS 来补上这个缺口。
为什么 <textarea> 或 <input> 标签里加个属性不能自动统计字数
HTML 标准中没有 data-word-count、maxlength 以外的原生字数统计机制。maxlength 只能限制长度，不反馈当前字数；required 或 pattern 也都不管计数。所谓“HTML 字数统计”，实际是开发者用 JS 把 value.length 拿出来算的，HTML 只负责提供容器和事件钩子。
-
value.length统计的是 UTF-16 码元个数，中文、emoji（如 ?）可能占 2 个码元，跟“字符数”不完全等价 - 用户粘贴内容、拖拽文本、用输入法组合字（如拼音上屏前的候选态）都可能让
input事件触发时机异常 - 只监听
input事件基本够用，但 iOS Safari 对某些粘贴行为响应滞后，可额外加compositionend防漏
怎么用 JS 实现靠谱的实时字数统计（含中文/emoji 兼容）
核心是监听 input 和 compositionend，用 Array.from(text).length 替代 text.length 来更准确地统计 Unicode 字符数（ES2015+）。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
const area = document.getElementById('my-textarea');
const counter = document.getElementById('char-count');
function updateCount() {
const text = area.value;
const charCount = Array.from(text).length;
counter.textContent = charCount;
}
area.addEventListener('input', updateCount);
area.addEventListener('compositionend', updateCount); // 防输入法上屏延迟
- 别用
textContent更新时直接拼字符串（如counter.textContent = text.length + '/100'），避免重复渲染开销 - 如果后端按字节校验（如 MySQL
utf8mb4字段限制），前端需用new TextEncoder().encode(text).length模拟字节数，而非字符数 - 对富文本编辑器（如
contenteditable），得用innerText或textContent提取纯文本再统计，不能直接读innerHTML
input vs keyup：为什么不用 keyup
keyup 会漏掉非键盘输入场景，比如右键粘贴、拖放文本、语音输入、输入法上屏——这些操作不会触发 keyup，但一定会触发 input。
立即学习“前端免费学习笔记（深入）”；
-
input是 HTML5 标准事件，兼容性好（IE9+），且在所有值变更路径下都会触发 -
keyup还会误判：用户长按按键（如按住 A 不放）会连续触发，但value可能只变一次 - 部分安卓 WebView 对
input事件有微小延迟，但比keyup漏数据强得多
真正容易被忽略的点是：不同输入法在 compositionstart 到 compositionend 之间，value 可能暂未更新，此时强行读取会拿到旧值；所以计数逻辑必须放在 compositionend 后执行，不能只依赖 input 就高枕无忧。
