为何keyup事件中event.target.value偶现为空？快速输入丢消息求助

问题根源 #

快速连续按回车发送消息时，onKeyUp事件的触发时机和textarea值的更新存在时序冲突。浏览器还没来得及把输入的内容同步到textarea的value属性，onKeyUp就已经触发，导致获取到空值或者错误的旧值；再加上发送后清空输入框的操作，快速操作下两种行为互相干扰，最终出现消息丢失的情况。

修复方案 #

1. 替换事件类型（推荐） #

放弃onKeyUp，改用onInput或onKeyDown，这两个事件能更稳定地捕获输入内容：

• onInput：只要textarea内容变化就触发，完全贴合内容更新时机，不会出现时序问题
• onKeyDown：按键按下时触发，此时输入内容已被浏览器捕获，能准确拿到当前值

示例代码（结合回车判断）：

onInput($event): void {
  const message = $event.target.value;
  // 监听回车（排除Shift+Enter换行场景）
  if ($event.key === 'Enter' && !$event.shiftKey) {
    $event.preventDefault(); // 阻止默认换行行为
    const content = message.trim();
    if (content) {
      this.sendMessage(content);
      this.textarea.value = ''; // 清空输入框
    }
  }
}

2. 优化onKeyUp逻辑（若坚持使用） #

通过延迟获取值的方式，利用浏览器事件循环确保textarea的value已更新：

onKeyUp($event): void {
  if ($event.key === 'Enter' && !$event.shiftKey) {
    $event.preventDefault();
    // 0延迟让浏览器先完成值更新，再执行后续逻辑
    setTimeout(() => {
      const content = this.textarea.value.trim();
      if (content) {
        this.sendMessage(content);
        this.textarea.value = '';
      }
    }, 0);
  }
}

3. 框架项目用双向绑定替代DOM操作 #

如果是Vue/Angular等框架项目，优先用框架提供的双向数据绑定，避免直接操作DOM带来的时序问题：

<textarea v-model="inputMsg" @keyup.enter="sendMsg"></textarea>

<script>
export default {
  data() {
    return {
      inputMsg: ''
    }
  },
  methods: {
    sendMsg() {
      const content = this.inputMsg.trim();
      if (content) {
        this.sendMessage(content);
        this.inputMsg = '';
      }
    }
  }
}
</script>

关键注意事项 #

• 处理回车时一定要调用preventDefault()，避免textarea自动换行导致内容混乱
• 发送前对内容做trim()处理，防止空消息被误发
• 框架项目尽量依赖框架的状态管理，减少直接操作DOM的代码

内容的提问来源于stack exchange，提问作者Sunstrike527