用户在 Textarea 中键入时出现键入问题

Question

让我们从头开始，我想做的是当正在与登录用户聊天的用户当前向文本区域键入内容时，这应该被视为键入...但下面的代码恰恰相反。当登录用户开始向文本区域键入内容时，它被视为“正在键入...”。例如，假设有两个用户正在互相聊天。我们称他们为用户 A 和用户 B。假设用户 A 是登录用户，用户 B 是当前正在与之聊天的登录用户。当用户 A 开始向文本区域键入内容时，它被视为正在键入。相反，应该没有任何东西。当用户 B 开始在文本区域中输入一些内容时，它看起来什么也没有。相反，应该说“正在输入...”，反之亦然。当用户 A 键入内容时，从用户 B 的角度来看应该被视为“正在键入...”，而当用户 B 键入内容时，从用户 A 的角度来看应该被视为“正在键入”。我正在尝试修复它持续了几个小时，但我做不到。

应该在这里看到

         <h3 class="display-4 fs-sm m-2">
  <?=$chatWith['name']?><br>
  <div class="d-flex align-items-center" title="online">
    <?php if (last_seen($chatWith['last_seen']) == "Active") { ?>
      <div class="online"></div>
      <small class="d-block p-1">Online</small>
    <?php } else { ?>
      <small class="d-block p-1">
        Last Seen: <?=last_seen($chatWith['last_seen'])?>
      </small>
    <?php } ?>
    <small class="d-block p-1" id="typingStatus"></small>
  </div>
</h3>

这是文本区域。

 <textarea cols="3" spellcheck="true" id="message" class="form-control" placeholder="Type Something..." onkeydown="startTyping(event, '<?=$chatWith['user_id']?>')" onkeyup="stopTyping(event, '<?=$chatWith['user_id']?>')"></textarea>

这是实现该功能的 JS 代码。

var typingTimer = null;
var isTyping = false;

function startTyping(event, chatWithId) {
  if (event.target.id === 'message' && chatWithId === '<?=$chatWith['user_id']?>') { 
    if (!isTyping && document.getElementById('message').value.trim().length >= 1) { 
      isTyping = true;
      updateTypingStatus(chatWithId);
    }
    clearTimeout(typingTimer);
    typingTimer = setTimeout(stopTyping, 2000, event, chatWithId);
  }
}

function stopTyping(event, chatWithId) {
  clearTimeout(typingTimer);
  if (isTyping && chatWithId === '<?=$chatWith['user_id']?>' && event.target.id === 'message' && document.getElementById('message').value.trim() === '') { 
    isTyping = false;
    updateTypingStatus(chatWithId);
  }
}

function updateTypingStatus(chatWithId) {
  var status = '';
  if (isTyping && chatWithId === '<?=$chatWith['user_id']?>') {
    status = 'typing...';
  }
  document.getElementById('typingStatus').innerHTML = status;

}

有了代码，我就让它工作了。我还在下面尝试了这段代码，但它不起作用。在下面的代码中，对于正在打字的用户和其他用户来说，没有什么是“正在打字……”。

var typingTimer = null;
var isTyping = false;

function startTyping(event, chatWithId) {
  if (event.target.id === 'message' && chatWithId !== '<?=$chatWith['user_id']?>') { 
    if (!isTyping && document.getElementById('message').value.trim().length >= 1) { 
      isTyping = true;
      updateTypingStatus(chatWithId);
    }
    clearTimeout(typingTimer);
    typingTimer = setTimeout(stopTyping, 2000, event, chatWithId);
  }
}

function stopTyping(event, chatWithId) {
  clearTimeout(typingTimer);
  if (isTyping && chatWithId !== '<?=$chatWith['user_id']?>' && event.target.id === 'message' && document.getElementById('message').value.trim() === '') { 
    isTyping = false;
    updateTypingStatus(chatWithId);
  }
}

function updateTypingStatus(chatWithId) {
  var status = '';
  if (isTyping && chatWithId !== '<?=$chatWith['user_id']?>') {
    status = 'typing...';
  }
  document.getElementById('typingStatus').innerHTML = status;
}