使用 DIV 模拟 Textarea 的 @ 人员功能

2023-11-09 08:24:02

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div id="editor" contenteditable="true"></div>

  <script>
    // 获取编辑器元素
    const editor = document.getElementById('editor');

    // 监听编辑器中的输入事件
    editor.addEventListener('input', (event) => {
      // 获取当前光标位置
      const selection = window.getSelection();
      const range = selection.getRangeAt(0);

      // 检查当前输入的字符是否为 '@'
      if (event.data === '@') {
        // 如果是 '@'，则弹出人员选择框
        const peopleList = ['张三', '李四', '王五', '赵六'];
        const peopleSelect = document.createElement('select');
        peopleSelect.style.position = 'absolute';
        peopleSelect.style.left = range.startOffset + 'px';
        peopleSelect.style.top = range.endOffset + 'px';
        for (const person of peopleList) {
          const option = document.createElement('option');
          option.value = person;
          option.textContent = person;
          peopleSelect.appendChild(option);
        }
        document.body.appendChild(peopleSelect);

        // 监听人员选择框中的选择事件
        peopleSelect.addEventListener('change', (event) => {
          // 获取选中的人员姓名
          const selectedPerson = event.target.value;

          // 将选中的人员姓名插入到编辑器中
          const newText = document.createTextNode(`@${selectedPerson}`);
          range.insertNode(newText);

          // 移除人员选择框
          document.body.removeChild(peopleSelect);
        });
      }
    });
  </script>
</body>
</html>

在现代化的协作办公场景中，人们越来越需要能够在文档中轻松地提及他人，以实现快速有效的沟通。为了满足这一需求，许多文字编辑器都提供了 @ 人员功能，允许用户通过输入“@”符号来选择人员并将其插入到文档中。

然而，传统的 Textarea 元素并不支持 @ 人员功能。为了在 DIV 中模拟 Textarea 的 @ 人员功能，我们可以利用 DIV 的 contenteditable 属性。contenteditable 属性允许用户直接在 DIV 元素中编辑内容，就像在 Textarea 元素中一样。

<div id="editor" contenteditable="true"></div>

通过设置 contenteditable 属性为“true”，DIV 元素就变成了一个可编辑区域。用户可以在其中输入文本、添加链接、插入图片等。

为了实现 @ 人员功能，我们需要在编辑器中监听用户输入的事件。当用户输入“@”符号时，我们需要弹出人员选择框。

const editor = document.getElementById('editor');

editor.addEventListener('input', (event) => {
  // 获取当前光标位置
  const selection = window.getSelection();
  const range = selection.getRangeAt(0);

  // 检查当前输入的字符是否为 '@'
  if (event.data === '@') {
    // 如果是 '@'，则弹出人员选择框
    const peopleList = ['张三', '李四', '王五', '赵六'];
    const peopleSelect = document.createElement('select');
    peopleSelect.style.position = 'absolute';
    peopleSelect.style.left = range.startOffset + 'px';
    peopleSelect.style.top = range.endOffset + 'px';
    for (const person of peopleList) {
      const option = document.createElement('option');
      option.value = person;
      option.textContent = person;
      peopleSelect.appendChild(option);
    }
    document.body.appendChild(peopleSelect);

    // 监听人员选择框中的选择事件
    peopleSelect.addEventListener('change', (event) => {
      // 获取选中的人员姓名
      const selectedPerson = event.target.value;

      // 将选中的人员姓名插入到编辑器中
      const newText = document.createTextNode(`@${selectedPerson}`);
      range.insertNode(newText);

      // 移除人员选择框
      document.body.removeChild(peopleSelect);
    });
  }
});