聊天框（番外篇）——如何实现@功能的整体删除？

前端

2023-12-23 22:25:08

在上篇文章中，我们已经初步实现了聊天输入框，但其@功能是不完善的，例如无法整体删除、无法获取除用户名以外的信息。本文将重点解决这些问题，并提供完整的解决方案。

实现方法

添加一个“删除”按钮

在聊天输入框中，为每个@功能添加一个“删除”按钮。这个按钮可以是一个简单的“X”图标，当用户点击时，可以删除整个@功能。

使用JavaScript来处理删除事件

当用户点击“删除”按钮时，我们可以使用JavaScript来处理这个事件。我们可以通过以下步骤来实现：

获取被点击的“删除”按钮的父元素，也就是包含@功能的元素。
从父元素中删除@功能元素。
更新聊天输入框中的文本。
获取除用户名以外的信息

除了用户名，我们还可以通过@功能获取其他信息，例如用户的ID、头像、个人简介等。我们可以通过以下步骤来实现：

在@功能中，添加一个“data-id”属性，并将其值设置为用户ID。
在JavaScript中，通过“data-id”属性获取用户ID。
使用用户ID来获取其他信息，例如头像、个人简介等。
完整示例

<div class="chat-input">
  <input type="text" id="chat-input-text" placeholder="说点什么吧...">
  <button id="chat-input-send" type="submit">发送</button>
</div>

<script>
  // 获取聊天输入框元素
  const chatInput = document.querySelector('.chat-input');

  // 获取聊天输入框中的文本框元素
  const chatInputText = document.querySelector('#chat-input-text');

  // 获取聊天输入框中的发送按钮元素
  const chatInputSend = document.querySelector('#chat-input-send');

  // 添加一个“删除”按钮
  chatInput.insertAdjacentHTML('beforeend', '<button id="chat-input-delete" type="button">X</button>');

  // 获取“删除”按钮元素
  const chatInputDelete = document.querySelector('#chat-input-delete');

  // 处理“删除”按钮的点击事件
  chatInputDelete.addEventListener('click', (e) => {
    // 获取被点击的“删除”按钮的父元素，也就是包含@功能的元素
    const parentElement = e.target.parentElement;

    // 从父元素中删除@功能元素
    parentElement.remove();

    // 更新聊天输入框中的文本
    chatInputText.value = chatInputText.value.replace(`@${parentElement.textContent}`, '');
  });

  // 处理聊天输入框中的文本框的输入事件
  chatInputText.addEventListener('input', (e) => {
    // 获取聊天输入框中的文本
    const text = e.target.value;

    // 如果文本中包含“@”，则获取@功能的用户名
    if (text.includes('@')) {
      // 获取@功能的用户名
      const username = text.match(/@(\w+)/)[1];

      // 通过用户名获取用户ID
      const userId = getUserId(username);

      // 通过用户ID获取其他信息，例如头像、个人简介等
      const userInfo = getUserInfo(userId);

      // 在聊天输入框中添加@功能
      chatInputText.value = text.replace(`@${username}`, `<a href="#" data-id="${userId}">@${username}</a>`);
    }
  });

  // 发送聊天消息
  chatInputSend.addEventListener('click', (e) => {
    // 获取聊天输入框中的文本
    const text = chatInputText.value;

    // 发送聊天消息
    sendChatMessage(text);

    // 清空聊天输入框
    chatInputText.value = '';
  });

  // 获取用户ID
  const getUserId = (username) => {
    // 模拟从数据库中获取用户ID
    return 1;
  };

  // 获取用户信息
  const getUserInfo = (userId) => {
    // 模拟从数据库中获取用户信息
    return {
      avatar: 'https://example.com/avatar.png',
      bio: 'This is my bio.',
    };
  };

  // 发送聊天消息
  const sendChatMessage = (text) => {
    // 模拟向服务器发送聊天消息
    console.log(`发送聊天消息：${text}`);
  };
</script>