我想在 textarea 中设置文本或使用不同颜色的文本输入（一种或另一种都可以，我不需要两者）。想想像简单的语法高亮这样的东西。所以，假设我定义了一些关键字。当用户在 textarea 或文本输入中键入时，我希望这些单词被着色为不同的颜色
我知道这需要 CSS、Javascript 和一些小精灵的某种组合。我想知道我需要深入研究哪个方向来找出如何做到这一点。
谢谢
文本区域或文本输入中的多色文本突出显示
IT技术
javascript
html
css
2021-02-23 00:17:49
3个回答
不，您不能在 textarea 或文本输入中执行此操作。任何与 CSS 文本相关的属性都会影响 textarea/input 中的整个文本。您需要一个可编辑的元素或文档来实现语法高亮显示。示例（适用于所有最近的浏览器；最后一个不支持的主要浏览器contenteditable是 Firefox 2.0）：
<code contenteditable="true">
<span style="color: blue">var</span> foo = <span style="color: green">"bar"</span>;
</code>你在找这个吗？
使用 jQuery.colorfy
代码：https : //github.com/cheunghy/jquery.colorfy
演示：http : //cheunghy.github.io/jquery.colorfy/
截屏视频：https : //www.youtube.com/watch?v= b1Lu_qKrLZ0
这实际上可以通过在标签内使用样式来完成，这是我完成此操作的网站之一的参考
<input style="border-radius: 5px; background-color: #000000; color: #ff0000; border-color:
blue;" class="form-control" name="firstname" placeholder="What you were looking for?"
type="text"
required autofocus />