本文介绍一种在输入框或文本域中实时高亮显示特定文本（如@提及）的技术方案。通过巧妙利用两个重叠的`contenteditable` div和普通div，一个作为用户输入层（文本透明，光标可见），另一个作为底层显示层进行高亮渲染。javascript负责监听输入事件，实时处理文本内容，并使用正则表达式匹配特定模式，将其替换为带样式的html，从而实现类似聊天应用中@提及的动态视觉效果。
在现代Web应用中，尤其是在聊天或社交平台，我们经常需要实现类似“@提及”用户的功能，并且要求在用户输入时即时将这些提及的文本高亮显示。然而，标准的或
核心原理：双层DIV实现文本高亮
由于原生和
上层DIV（用户输入层）：这是一个设置了contenteditable=”true”的DIV元素。它的文本颜色被设置为透明（color: transparent;），但光标颜色保持可见（caret-color: black;），这样用户可以看到光标并正常输入，但看不到实际输入的文本。下层DIV（高亮显示层）：这是一个普通的DIV元素，它位于上层DIV的下方，并且与上层DIV具有相同的尺寸和定位。JavaScript会实时获取上层DIV的内容，进行处理（例如，使用正则表达式匹配@提及），然后将处理后的带有HTML标签（如）的文本作为innerHTML赋值给下层DIV，从而实现高亮显示。
这种方法的优势在于，用户实际操作的是一个纯文本的contenteditable区域，避免了直接在用户输入区域操作DOM带来的复杂性和性能问题。所有的高亮渲染都发生在下层DIV，实现了输入与显示的有效分离。
HTML结构
首先，我们需要构建基础的HTML结构。一个容器DIV包裹着两个核心DIV：一个用于显示高亮文本，另一个用于接收用户输入。
Hi @Roko, how are you today?
Chat tips:
Use @username to mention a user.
Use Enter to send.
Use Shift+Enter to go to a new line.
.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 类定义了高亮文本的具体颜色。
JavaScript逻辑
JavaScript负责处理用户输入事件，同步滚动，以及将匹配到的文本替换为高亮HTML。
const colorMention = (elText, elPre) => { // 使用正则表达式匹配以空格或行首开头的 @字母序列 // p{L} 匹配任何Unicode字母 elPre.innerHTML = elText.innerHTML.replace(/(?<=^| )@p{L}+/gu, "$&");};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实现输入框文本实时高亮的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1602112.html
微信扫一扫 
支付宝扫一扫 
