<p>需用 JavaScript 监听 input 事件实时更新字数，禁用 change；推荐缓存 span 引用、父容器相对定位+span 绝对定位右下角；伪类不可直接执行 JS，须配合 data-* 属性；Emoji 等需用 Array.from(text).length 获取视觉字数。</p>
span 怎么和 input 绑定实时字数？
不能靠 CSS 独立完成，span 本身没有监听能力，必须用 JavaScript 监听 input 事件。常见错误是只监听 change，结果用户打字不触发统计——change 只在失焦时触发，而字数要“实时”，得用 input 事件。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
<input>或<textarea>绑定addEventListener('input', handler)，不是oninput内联写法（不易维护、难移除） -
span放在输入框右下角，推荐用相对定位的父容器包裹二者，避免浮动或绝对定位脱出流导致布局错乱 - 不要在 handler 里反复
document.querySelector查找span，应提前缓存引用
伪类 :after 能不能直接显示字数？
不能。::after 的 content 只支持字符串字面量或属性值（如 attr(data-count)），无法执行 JS 表达式。想用伪类显示动态数字，必须配合 data-* 属性更新，再让 CSS 读取。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- JS 更新
input元素的dataset.count，例如：inputEl.dataset.count = text.length - CSS 写：
input::after { content: attr(data-count); }—— 但注意：input是替换元素，不支持::before/::after（多数浏览器会忽略） - 真正可用的是给
span加伪类，或改用textarea的父容器加::after（需设display: block）
textarea 右下角定位怎么不遮挡滚动条？
当 textarea 内容超出可视区域，滚动条出现，若 span 用 position: absolute 定位在右下，容易被滚动条盖住或挤偏。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
span放在textarea的父容器内，父容器设position: relative -
span用position: absolute; bottom: 4px; right: 4px;，并加pointer-events: none避免干扰点击 - 为兼容滚动条宽度差异（macOS 隐藏式 vs Windows 常驻），可加
padding-right: 16px到textarea，再微调right值
中文、Emoji、空格怎么算“一个字”？
用户直觉里的“字数”常指“可见字符数”，但 .length 对 Emoji（如 ??）或中文全角标点返回的是 Unicode 码点数，可能和预期不符。比如 "??".length === 4，但用户认为是 1 个字。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 简单场景用
text.length即可，多数 CMS 和表单要求的就是 UTF-16 码点数 - 若需真实视觉字数，用
Array.from(text).length（支持大多数 Emoji） - 严格按“汉字+字母+数字”计数？正则
text.match(/[\u4e00-\u9fa5a-zA-Z0-9]/g)?.length || 0，但会漏掉全角符号 - 别在每次
input事件里跑复杂正则——性能敏感，可节流或仅在blur时校验
字体大小、行高、父容器 padding 这些细节，实际布局时比逻辑更易出问题。伪类只是锦上添花，核心还是 span 的 DOM 更新和定位方式。
