如何在不使用contenteditable的input标签中高亮@开头文本

原生的<input type="text">或<textarea>无法直接为部分文本设置样式，要实现类似Chrome查找功能的高亮效果（不修改原始输入内容的纯文本属性），最可行的思路是用叠加层模拟高亮——在输入框上方放置一个仅用于显示高亮的透明容器，同步输入内容并对@开头文本标记样式，输入框本身保持可编辑状态，视觉上实现高亮效果。

核心实现步骤 #

• 布局结构：将输入框和高亮容器放在同一个相对定位的父容器中，两者尺寸、位置完全重合，高亮容器层级低于输入框，不干扰输入交互。
• 样式对齐：确保高亮容器的字体、行高、内边距等样式与输入框完全一致，保证文本位置精准对齐；高亮容器禁用鼠标事件，避免影响输入框的聚焦和编辑。
• 内容同步：监听输入框的输入、粘贴等事件，实时将输入内容同步到高亮容器，并通过正则匹配@开头的文本，替换为带有高亮样式的HTML片段。

完整代码示例 #

<div class="input-wrapper">
  <input type="text" class="text-input" placeholder="输入包含@的文本...">
  <div class="highlight-layer"></div>
</div>

<style>
.input-wrapper {
  position: relative;
  width: 400px;
}

.text-input, .highlight-layer {
  width: 100%;
  padding: 8px 12px;
  font-size: 16px;
  font-family: inherit;
  line-height: 1.5;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.text-input {
  position: relative;
  z-index: 1;
  background-color: #fff;
  /* 确保输入框文字不被高亮层遮挡 */
  color: transparent;
  text-shadow: 0 0 0 #333;
}

.highlight-layer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none; /* 禁用鼠标事件，不干扰输入 */
  white-space: pre-wrap; /* 适配textarea换行 */
  word-wrap: break-word;
}

.highlight {
  background-color: #ffeb3b; /* 高亮背景色 */
}
</style>

<script>
const input = document.querySelector('.text-input');
const highlightLayer = document.querySelector('.highlight-layer');

// 同步输入内容并处理高亮
function syncHighlight() {
  const value = input.value;
  // 匹配@开头的连续字符（可根据需求调整正则规则）
  const highlightedText = value.replace(/@[\w]+/g, '<span class="highlight">$&</span>');
  highlightLayer.innerHTML = highlightedText;
  
  // 同步滚动位置（适配textarea）
  highlightLayer.scrollTop = input.scrollTop;
  highlightLayer.scrollLeft = input.scrollLeft;
}

// 监听输入事件
input.addEventListener('input', syncHighlight);
input.addEventListener('paste', syncHighlight);
input.addEventListener('scroll', syncHighlight);

// 初始化
syncHighlight();
</script>

关键细节说明 #

1. 输入框文字处理：通过color: transparent + text-shadow让输入框文字可见，但不会遮挡下方高亮层的背景色，实现视觉上的高亮叠加。
2. 正则规则：示例中用/@[\w]+/g匹配@开头的字母/数字/下划线，可根据需求调整（比如支持@后带特殊字符：/@[^\s]+/g）。
3. 适配textarea：如果使用多行文本框，只需把<input>换成<textarea>，样式中保持white-space: pre-wrap即可适配换行。

这种方案完全保留了输入框的纯文本内容，仅通过视觉层实现高亮，和Chrome查找功能的高亮逻辑一致，符合你的需求。

内容的提问来源于stack exchange，提问作者user21744620