JavaScript实现输入框内@提及（@mention）的实时变色高亮教程

admin 百科 2025-12-09 14

JavaScript实现输入框内@提及（@mention）的实时变色高亮教程-第1张图片-佛山资讯网

本教程详细介绍了如何在Web前端实现输入框或文本域中特定文本（如`@提及`）的实时高亮显示。通过巧妙结合`contenteditable`属性的`p`元素和底层高亮`p`的叠加技术，我们可以在用户输入时动态解析并着色匹配的文本，同时保持原生的输入体验，解决了标准`input`和`textarea`元素不支持富文本样式的问题。文章将提供完整的HTML、CSS和JavaScript代码示例及详细解释。

核心思想：双层叠加法

在标准的HTML 或元素中，我们无法直接对部分文本进行样式修改，例如改变颜色或字体。为了实现类似语法高亮或@提及变色的功能，一种常用的高级技巧是采用“双层叠加”方案。

该方案的核心是创建两个高度重叠的HTML元素：

顶层输入区 (contenteditable p)：这是一个具有contenteditable属性的p元素，用户在此处进行实际的文本输入。为了实现底层高亮效果的可见性，这个p的文本颜色会被设置为透明 (color: transparent;)，但光标颜色 (caret-color: black;) 保持可见，以确保用户能够感知输入位置。

底层高亮区 (普通 p 或 pre)：这是一个普通的p或

元素，它位于顶层输入区的正下方。当用户在顶层输入区输入文本时，JavaScript会实时获取顶层的内容，进行文本解析（例如使用正则表达式匹配@提及），然后将匹配到的部分用带有特定样式的<span>标签包裹，最终将处理后的HTML内容渲染到这个底层高亮区。</li></ol><p>通过这种方式，用户感觉像是在一个支持富文本的输入框中打字，但实际上他们是在一个透明的输入层上操作，而视觉上的高亮效果则由底层元素提供。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p><h3>HTML 结构</h3><p>首先，我们需要构建一个包含这两个叠加层的基本HTML结构。一个父容器用于定位，内部包含一个用于高亮的p和一个可编辑的p。</p><pre class="brush:php;toolbar:false;"><p class="message">
  <!-- 底层高亮区：用于显示高亮后的文本 -->
  <p class="pre"></p>
  <!-- 顶层输入区：用户实际输入文本的区域，文本透明但光标可见 -->
  <p class="text" contenteditable spellcheck="false">Hi @Roko, how are you today?</p>
</p>

<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 是父容器，用于相对定位其子元素。
.pre 是底层高亮区，它将显示经过处理的HTML内容。
.text 是顶层输入区，它具有contenteditable属性，允许用户直接编辑其内容。spellcheck="false" 用于禁用拼写检查。

CSS 样式：实现叠加与视觉效果

CSS是实现双层叠加效果的关键。我们需要确保两个层完美对齐，并且顶层输入区能够正确地显示光标但隐藏文本。

* {
  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; /* 单词在必要时断行 */
}

/* 顶层输入区的特殊样式：文本透明，光标可见 */
.message .text {
  position: relative; /* 相对定位，确保在底层之上 */
  background: transparent;
  outline: none; /* 移除焦点时的外边框 */
  color: transparent; /* 文本颜色透明 */
  caret-color: black; /* 光标颜色可见 */
}

/* 底层高亮区的特殊样式：绝对定位，覆盖整个父容器 */
.message .pre {
  position: absolute; /* 绝对定位，与父容器对齐 */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  user-select: none; /* 禁止用户选择底层文本 */
}

/* @提及文本的高亮样式 */
.mention {
  color: fuchsia; /* 紫红色 */
}

登录后复制

关键CSS点：

.message 容器设置为 position: relative;。
.pre 设置为 position: absolute; 并覆盖整个父容器，确保它与 .text 精确重叠。
.text 设置为 color: transparent; 和 caret-color: black;。
非常重要： .pre 和 .text 必须具有完全相同的 font, padding, line-height, white-space, word-wrap 等文本相关样式，以确保两层中的文本在视觉上完美对齐。
.pre 的 user-select: none; 防止用户意外选择到底层的高亮文本。