今天学到了什么#

• 关于事件类型的input和keyup的注意点

• keydown 事件和回车键的行为顺序

• 排他思想

  干掉别人 移除类active

  我登基 我添加类active

关于事件类型的input和keyup的注意点#

这样不是也行吗？没必要再写一个input事件监听。

1
 textarea.addEventListener('keyup', function (e) {
2
      if (e.key === 'Enter') {
3
        if (textarea.value.trim() !== '') {
4
          item.style.display = 'block';
5
          text.innerHTML = textarea.value;
6
        }
7
        textarea.value = '';
8
      }
9
      const val = textarea.value;
10
      total.textContent = `${val.length}/200字`;
11
    });

这样写是可以运行的，对于单纯通过键盘打字的场景，效果确实一样。

但是，强烈建议保留 input 事件，因为只用 keyup 有几个致命的缺陷：

1. 无法检测鼠标操作：如果用户是右键粘贴、剪切或者拖拽文字进输入框，keyup 事件完全不会触发，这就导致字数统计不会更新，一直显示 0/200。
2. 长按按键延迟：如果你长按一个键不放（比如长按 aaaa...），内容已经在增加了，但因为你没有松开键盘，keyup 就一直不触发，字数统计就不会实时变化。

input 事件是专门为了监控内容变化而设计的，无论你是打字、粘贴、还是语音输入，只要内容变了它就会触发。

所以标准的做法通常是：

• input：负责监控字数、内容变化。
• keydown / keyup：负责监听特定按键（如回车发送）。

如果你想让功能更健壮，建议改回分开写的形式。如果你只是做简单演示，不在乎粘贴功能，目前的写法也可以凑合用。

keydown 事件和回车键的行为顺序#

为什么我第一次输入之后，输入栏并没有清空，会留下一个回车

这是因为使用的是 keydown 事件。当你在 keydown 事件中捕获到回车键时，虽然你在代码中清空了输入框的内容，但回车键的默认行为（即在文本框中插入一个换行符）会在你的代码执行完毕后紧接着发生。

因此，执行顺序是：

1. 你的代码清空了文本框 (textarea.value = '')。
2. 浏览器的默认行为在清空后的文本框中插入了一个换行符。

要解决这个问题，只需要在判断是回车键之后，调用 e.preventDefault() 来阻止浏览器的默认换行行为。

我来帮你修改代码：

这是因为你在 keydown 事件中清空了输入框，但没有阻止回车键的默认行为。

1
    textarea.addEventListener('keydown', (e) => {
2
      if (e.key === 'Enter') {
3
        e.preventDefault(); // 新增这一行，阻止默认的回车换行
4
        item.style.display = 'block';
5
        text.innerHTML = textarea.value;
6
        textarea.value = '';
7
      }
8
    });