欢迎来到我的博客！#

使用 Markdown 格式编写。

今天学到了什么#

关于事件类型focus和input

写在 focus 事件里之所以不行（或者说达不到实时更新效果），是因为 focus 事件是一次性的。

原因解释#

触发时机不同：
- focus 事件：只有当你的鼠标点击文本框，或者文本框获得光标的那一瞬间才会触发。代码执行完这一遍就不再执行了。
- input 事件：每当你输入一个字、删除一个字，或者粘贴内容时，只要文本框的内容发生了变化，它就会持续触发。
现象：
- 如果你把统计字数的代码写在 focus 里，只有当你刚点进框里时，它会统计一次当前字数。
- 当你开始打字时，因为没有触发新的事件，字数统计就不会变了。

解决方法#

你应该使用 input 事件来实现实时统计。你代码下方注释掉的那部分其实就是正确的做法。

我帮你把代码修改过来，启用 input 事件监听：

1
    const textarea = document.querySelector('#tx');
2
    const total = document.querySelector('.total');
3

4
    textarea.addEventListener('focus', () => {
5
      total.style.opacity = 1;
6
      // 聚焦时也需要更新一次，防止页面刷新后内容还在但字数没显示
7
      const val = textarea.value;
8
      total.textContent = `${val.length}/200字`;
9
    });
10

11
    textarea.addEventListener('blur', () => {
12
      total.style.opacity = 0;
13
    });
14

15
    // 这里才是实时输入更新字数的关键
16
    textarea.addEventListener('input', () => {
17
      const val = textarea.value;
18
      total.textContent = `${val.length}/200字`;
19
    });

我将为你移除注释，启用 input 事件。

写在 focus 事件里之所以不行，是因为 focus 事件只会在文本框“获得焦点”的那一瞬间触发一次。

当你点击文本框开始输入时：

触发 focus：代码执行一次，统计了当前字数（比如 0/200）。
开始打字：你输入内容时，focus 事件已经结束了，它不会监测后续的输入行为，所以字数不会随着你的打字而更新。
什么是正确的：你需要用 input 事件。input 事件会在用户每次输入、删除文本内容时触发，非常适合用来实时监测输入的字数。

我已经帮你取消了代码中 input 部分的注释，现在字数统计功能应该可以正常使用了。

修改后的代码逻辑如下（供参考）：

1
    // 获得焦点时，仅显示统计文字（不需要重复计算，input 会接管）
2
    textarea.addEventListener('focus', () => {
3
      total.style.opacity = 1;
4
    });
5

6
    textarea.addEventListener('blur', () => {
7
      total.style.opacity = 0;
8
    });
9

10
    // 关键点：使用 input 事件实时监听内容变化
11
    textarea.addEventListener('input', () => {
12
      const val = textarea.value;
13
      total.textContent = `${val.length}/200字`;
14
    });

Lovely firefly!

Amidst Silenced Stars, I Deep Sleep

关于事件类型focus和input

欢迎来到我的博客！#

今天学到了什么#

原因解释#

解决方法#

赞助支持

目录