javascript - 突出显示输入字段中的文本

Question

我正在尝试在 JS 中创建一个脚本，以突出显示用户键入的某些文本（有点像https://regex101.com/中的“测试字符串”框），但似乎无法更改文本在输入字段本身内，因为它正在被使用。有谁知道我该怎么做？

标签： javascripthtmlregex

Answer 1

无法设置input字段（或 a textarea）内容的样式。

有两种方法可以伪造它。第一个是contenteditable，您可以在其中直接编辑 HTML 元素，例如<div>. 这就是浏览器中大多数所见即所得编辑器的工作方式。由于它是一个 HTML 元素，它可以有子结构，并且它的后代元素可以独立设置样式。

第二个，由 regex101 使用，工作量更大：用另一个元素覆盖真实的输入字段。在那个网站上，您可能认为您正在编辑一个输入字段，但您的按键被一个假的（并且永远是空的）捕获，它被显示漂亮颜色和框textarea的 a 所掩盖。div每次按下一个键时，textarea 就会被清空、移动和调整大小，键本身会应用于输入数据，然后将其呈现在 textarea 之上，使其模糊。那里发生的一切都被 JavaScript 伪造，看起来、感觉和行为都像一个输入字段，但它实际上并不存在。执行此操作的代码非常复杂，超出了 Stack Overflow 问题的范围。