利用contenteditable和双层DIV实现输入框文本实时高亮

<div class="message">
  <div class="pre"></div> <!-- 下层DIV：用于显示高亮文本 -->
  <div class="text" contenteditable spellcheck="false">Hi @Roko, how are you today?</div> <!-- 上层DIV：用户输入层 -->
</div>

<br>
Chat tips:<br> Use @username to mention a user.<br> Use <kbd>Enter</kbd> to send.<br> Use <kbd>Shift</kbd>+<kbd>Enter</kbd> to go to a new line.<br>

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  font: 16px/1.3 sans-serif;
}

.message {
  display: block;
  border: 1px solid #888;
  position: relative; /* 容器相对定位，以便内部元素绝对定位 */
  width: 100%;
  border: 1px solid #ccc;
}

.message .pre,
.message .text {
  border: 0;
  overflow: scroll;
  overflow-x: hidden;
  font: inherit;
  padding: 10px;
  height: 5rem;
  resize: none;
  width: 100%;
  white-space: break-spaces; /* 保持换行和空格 */
  word-wrap: break-word; /* 单词内部断行 */
}

/* 上层 contenteditable DIV 的样式：透明文本，可见光标 */
.message .text {
  position: relative; /* 保持在最上层 */
  background: transparent;
  outline: none;
  color: transparent; /* 关键：文本透明 */
  caret-color: black; /* 关键：光标可见 */
}

/* 下层 DIV 的样式：绝对定位，覆盖整个容器 */
.message .pre {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  user-select: none; /* 禁用文本选择，避免干扰用户输入 */
}

/* 高亮文本的样式 */
.mention {
  color: fuchsia; /* 例如，品红色 */
}

const colorMention = (elText, elPre) => {
  // 使用正则表达式匹配以空格或行首开头的 @字母序列
  // \p{L} 匹配任何Unicode字母
  elPre.innerHTML = elText.innerHTML.replace(/(?<=^| )@\p{L}+/gu, "<span class='mention'>$&</span>");
};

const scrollMirror = (elText, elPre) => {
  // 同步两个DIV的滚动位置
  elPre.scrollTo(elText.scrollLeft, elText.scrollTop);
};

const handleKey = (ev, elText, elPre) => {
  if (ev.key === "Enter" && !ev.shiftKey) {
    // 如果按下Enter键但没有Shift键，阻止默认的换行行为
    ev.preventDefault();

    // 获取并检查消息内容
    const message = elText.innerHTML;
    if (!message.trim()) {
      return; // 消息为空，不提交
    }

    // 您的提交逻辑将在这里实现
    console.log("提交消息:", message);

    // 提交后清空输入和显示区域
    elText.innerHTML = "";
    elPre.innerHTML = "";
  } else {
    // 对于其他按键，确保滚动条同步
    scrollMirror(elText, elPre);
  }
};

document.querySelectorAll(".message").forEach(el => {
  const elText = el.querySelector(".text"); // 获取用户输入DIV
  const elPre = el.querySelector(".pre");   // 获取高亮显示DIV

  // 监听滚动事件，同步滚动条
  elText.addEventListener("scroll", () => scrollMirror(elText, elPre));
  // 监听键盘抬起事件，同步滚动条（在文本内容变化后可能需要）
  elText.addEventListener("keyup", () => scrollMirror(elText, elPre));
  // 监听输入事件，实时进行文本高亮处理
  elText.addEventListener("input", () => colorMention(elText, elPre));
  // 监听键盘按下事件，处理Enter键逻辑
  elText.addEventListener("keydown", (ev) => handleKey(ev, elText, elPre));

  // 初始化：首次加载时进行高亮和滚动同步
  colorMention(elText, elPre);
  scrollMirror(elText, elPre);
});