文本框实时词数统计：事件与分词

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

绑定

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 的容器，读屏能播报变化。
• 设定上限时给出可见提示，而不是静默截断。