Question

我有一个textarea，用户将输入他的输入，我想更改我期望在输入字符串中找到的特定单词的颜色，例如我希望用户输入以下内容：

“我的名字是Maryam，我的年龄是24岁”

所以我想将“我的名字”和“我的年龄”的颜色更改为蓝色，我希望在用户输入“我的名字”或“我的年龄”后进行此更改。并在TEXTAREA内展示彩色文字..

有没有办法用css，html或javascript做到这一点？

Answer 1

文本区域无法实现。但你可以通过隐藏textarea并将颜色替换为另一个元素来伪造结果。

<强> HTML

<textarea onkeyup="textChange()"></textarea>
<div id="colorText"></div>

<强>使用Javascript：

var textChange=function(){
    var text=event.target.value;

    if(text.indexOf("My name")>-1){
        text=text.replace("My name", "<span class='blue'>My name</span>");
    }

    if(text.indexOf("my age")>-1){
        text=text.replace("my age", "<span class='blue'>my age</span>");
    }

    document.getElementById("colorText").innerHTML=text;
}

<强> CSS

.blue{
    color:blue;
}

Answer 2

我不确定您是否可以更改输入字段本身的文本颜色。您可以做的是预览，在显示预览时，您可以添加更改您要查找的单词颜色的标签。

我建议每次输入一个新字符时使用Regex语句来读取文本（你可以使用jQuery＆＃34; Change＆＃34; event）来实现这一点。无论你在哪里找到这些单词，都可以在其周围放置一个html标签进行预览。通过适当的CSS样式，这些标签可以更改其中单词的颜色。

动态更改特定单词的颜色

2 个答案: