将 CSS 应用于文本输入字段中的单个单词答案

【问题标题】：Applying CSS to individual words in a Text Input field将 CSS 应用于文本输入字段中的单个单词
【发布时间】：2023-03-10 23:38:01
【问题描述】：

我正在尝试将样式应用于文本输入字段中的特定单词或短语，我在“Facebook 提及”中看到它以类似的方式完成。

理想情况下，我想运行一些正则表达式来查找文本框中位于两个方括号之间的任何文本，然后将背景颜色应用于该单词且仅应用于该单词。

我已经开始在文本框顶部覆盖一个 DIV，但是我在保持对齐时遇到了问题，非常感谢任何帮助！

非常感谢，马库斯

【问题讨论】：

【解决方案1】：

input 控件中的部分文本样式不能与那里的其他文本不同，因为它是纯文本，不能插入任何标记。

不要尝试像叠加元素这样的虚假样式，只需使用可编辑的div（或其他允许内容的元素），使用contenteditable 属性。这会产生一些问题（用户操作可能会在内容中引入标记）以及许多新的可能性。

【讨论】：

【解决方案2】：

您好，有一个 jquery 插件可以解决问题。

【讨论】：

这是一个不错的插件，但它适用于一般的 HTML 内容，而不适用于 OP 要求的文本输入字段。查看它的文档：它是如何工作的：突出显示插件搜索给定元素的文本......当找到该术语时，它只是用元素包装。所以我们不能在文本输入字段内有跨度。