### [文本框实时词数统计：事件与分词](https://www.huociguo.com/article/1640)

**Published:** 2026-10-01T13:14:39

**Author:** 米了

**Excerpt:** 输入时不更新计数，通常是三个环节中的一个断掉：函数名与绑定名不一致、事件选错、分词逻辑过于粗糙。计数依赖事件、…

输入时不更新计数，通常是三个环节中的一个断掉：函数名与绑定名不一致、事件选错、分词逻辑过于粗糙。

![键盘输入场景](https://api.huociguo.com/wp-content/uploads/2026/10/e9.jpg)

计数依赖事件、分词与元素访问三处协同

## 绑定

```
const box = document.querySelector('#content');
const out = document.querySelector('#count');
box.addEventListener('input', () => {
  out.textContent = countWords(box.value);
});
```

用 input 事件而不是按键抬起事件。前者覆盖粘贴、拖拽输入与输入法组合过程，后者会漏掉非键盘输入。

## 分词

```
function countWords(text) {
  const parts = text.trim().split(/\s+/);
  return parts[0] === '' ? 0 : parts.length;
}
```

先去掉首尾空白再切分，空串单独返回 0，否则空输入会被算成一个词。中英混排时按空白切分不成立，需要额外按字符统计并分开呈现。

## 元素访问时机

脚本放在文档头部且没有延迟执行时，取元素得到空值。把脚本放在文档末尾，或使用 defer 属性。

## 细节

-   高频输入时做一次节流，避免每次按键都做全量切分。
-   把结果写进带 aria-live 的容器，读屏能播报变化。
-   设定上限时给出可见提示，而不是静默截断。

**Tags:** input事件, 分词逻辑, 字符统计, 实时计数, 文本域统计

**Categories:** HTML5

---