这问题我做聊天功能时也踩过同款坑！你当前的代码只在用户按键时触发“正在输入”信号，但没判断输入框实际是否有内容，也没在用户清空内容或停止输入时通知服务器取消状态。下面给你一套完整的修改方案：

核心思路 #

1. 改用input事件替代keypress：它能监听所有输入内容变化（包括删除、粘贴、输入法选词），覆盖场景比keypress全面得多
2. 加入延迟定时器：避免用户短暂暂停输入就立刻取消状态（比如思考内容的时候）
3. 新增“停止输入”的Socket事件：当输入框为空或用户停止输入超过一定时间，通知服务器移除指示器

修改后的完整代码 #

var message = document.getElementById('messagebox');
var istyping = document.getElementById('istyping');
let typingTimer; // 存储定时器ID，用于后续重置
const typingDelay = 2000; // 2秒无输入则视为停止输入

// 监听输入框所有内容变更
message.addEventListener('input', function() {
  const inputContent = message.value.trim(); // 去掉首尾空格，判断实际是否有有效内容

  if (inputContent) {
    // 输入框有内容时，发送正在输入信号
    socket.emit('typing', { user: user || 'Anonymous' });
    // 重置定时器：用户继续输入时，取消之前的停止输入倒计时
    clearTimeout(typingTimer);
  } else {
    // 输入框为空时，立刻发送停止输入信号
    socket.emit('stopTyping');
  }

  // 设置倒计时：2秒内无新输入则触发停止输入
  typingTimer = setTimeout(() => {
    socket.emit('stopTyping');
  }, typingDelay);
});

// 监听服务器发来的正在输入通知
socket.on('typing', function(data){
  istyping.innerHTML = '<p><i>'+ data.user +" is typing..."+'</i></p>';
});

// 新增：监听服务器发来的停止输入通知
socket.on('stopTyping', function(){
  istyping.innerHTML = ''; // 清空指示器内容
});

// 发送消息时同步取消输入状态（保留你原有逻辑并优化）
function sendMessage() {
  // ... 你原来的发送消息逻辑 ...
  socket.emit('stopTyping'); // 发送消息后立即取消输入状态
  message.value = ''; // 清空输入框
}

关键细节说明 #

• input事件的优势：不管用户是键盘输入、删除内容，还是右键粘贴/剪切，甚至用输入法选词，都能触发，完美覆盖所有内容变更场景
• 延迟定时器：用户连续输入时，每次都会重置定时器，只有当用户真正停止输入超过2秒，才会发送停止信号，避免状态频繁切换
• trim()的作用：防止用户只输入空格就触发“正在输入”的误判
• 服务器端配合：别忘了在Socket服务器端也要监听stopTyping事件，然后广播给其他在线用户哦！

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