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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-12-04

浏览次数：次

返回列表

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

本文介绍一种在输入框或文本域中实时高亮显示特定文本（如@提及）的技术方案。通过巧妙利用两个重叠的`contenteditable` div和普通div，一个作为用户输入层（文本透明，光标可见），另一个作为底层显示层进行高亮渲染。j*ascript负责监听输入事件，实时处理文本内容，并使用正则表达式匹配特定模式，将其替换为带样式的html，从而实现类似聊天应用中@提及的动态视觉效果。

在现代Web应用中，尤其是在聊天或社交平台，我们经常需要实现类似“@提及”用户的功能，并且要求在用户输入时即时将这些提及的文本高亮显示。然而，标准的或元素并不支持直接在内部对部分文本应用HTML样式。本文将详细介绍一种巧妙地结合contenteditable属性和双层DIV结构来实现这一需求的专业技术方案。

核心原理：双层DIV实现文本高亮

由于原生和元素的限制，我们无法直接在其中插入HTML标签来改变部分文本的样式。解决方案是模拟一个可编辑的文本区域，并利用两个重叠的DIV元素：

上层DIV（用户输入层）：这是一个设置了contenteditable="true"的DIV元素。它的文本颜色被设置为透明（color: transparent;），但光标颜色保持可见（caret-color: black;），这样用户可以看到光标并正常输入，但看不到实际输入的文本。
下层DIV（高亮显示层）：这是一个普通的DIV元素，它位于上层DIV的下方，并且与上层DIV具有相同的尺寸和定位。J*aScript会实时获取上层DIV的内容，进行处理（例如，使用正则表达式匹配@提及），然后将处理后的带有HTML标签（如）的文本作为innerHTML赋值给下层DIV，从而实现高亮显示。

这种方法的优势在于，用户实际操作的是一个纯文本的contenteditable区域，避免了直接在用户输入区域操作DOM带来的复杂性和性能问题。所有的高亮渲染都发生在下层DIV，实现了输入与显示的有效分离。

HTML结构

首先，我们需要构建基础的HTML结构。一个容器DIV包裹着两个核心DIV：一个用于显示高亮文本，另一个用于接收用户输入。

Tunee AI

新一代AI音乐智能体

1104 查看详情 Tunee AI

<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>

.message 作为容器，用于定位两个重叠的DIV。
.pre 是下层DIV，用于渲染高亮后的HTML内容。
.text 是上层contenteditable DIV，用户在此输入。spellcheck="false" 可禁用拼写检查。

CSS样式

CSS是实现双层DIV重叠和透明文本效果的关键。

* {
  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; /* 例如，品红色 */
}

.message 设置position: relative; 为其子元素的绝对定位提供参考。
.pre 和 .text 共享基础样式，确保它们在视觉上高度一致，包括字体、内边距、高度和滚动行为。
.text 的color: transparent; 和 caret-color: black; 是实现用户输入可见光标但不可见文本的核心。
.pre 的position: absolute; 和 top/right/bottom/left: 0; 使其完全覆盖容器，并位于.text下方。user-select: none; 防止用户意外选择到底层文本。
.mention 类定义了高亮文本的具体颜色。

J*aScript逻辑

J*aScript负责处理用户输入事件，同步滚动，以及将匹配到的文本替换为高亮HTML。

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);
});

colorMention(elText, elPre)：这是核心函数。它获取elText（用户输入层）的innerHTML，使用正则表达式 /(? 标签中。然后将处理后的HTML赋值给elPre（高亮显示层）的innerHTML。
scrollMirror(elText, elPre)：确保当用户在contenteditable区域滚动时，底层的高亮显示区域也同步滚动，保持视觉一致性。
handleKey(ev, elText, elPre)：处理键盘事件，特别是Enter键。如果用户按下Enter键

以上就是利用contenteditable和双层DIV实现输入框文本实时高亮的详细内容，更多请关注其它相关文章！

# 双击 # 产品推广平台卖东西网站 # 线路营销推广 # 针对政府的营销推广策略 # 开关阵列网站建设 # 萍乡一站式营销推广加盟 # 如何在网站上免费推广 # 网站平台的选择与推广 # 专业网站建设解决方案 # 北海网站建设网络 # 网站建设襄阳 # 这一 # 您的 # 换行 # 的是 # css # 滚动条 # 这是 # 按下 # 输入框 # overf # 绝对定位 # 键盘事件 # css样式 # 正则表达式 # go # html # java # word # javascript

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：美易修图app怎么把照片变漫画效果_美易修图app真人转漫画滤镜教程

下一篇：使用CSS修改包含多元素按钮的文本内容

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

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

核心原理：双层DIV实现文本高亮

HTML结构

CSS样式

J*aScript逻辑