Javascript 键入时更改单词的颜色

我正在尝试为一个单词指定一种颜色。所以当有人输入这个词。。这个词马上就变成了我给它指定的颜色。我在网上到处找，找不到任何例子或方法。有可能吗

例如，如果我有，我有一个空白输入

<input type="text"/>

当我输入“facebook”这个词时，我希望在输入最后一个字母后这个词变成蓝色。 我希望使用jQuery或纯JavaScript语言来完成。在提交输入后，我可以通过搜索字符串和添加样式配置来更改单词的颜色，但我不希望这样。。我想在不提交输入的情况下立即更改这封信

---

如果“不可能”，为什么可以为特定单词指定不同的颜色。

如果要更改整个单词

$('input').keyup(function(){

    var $input = $(this);

    $input.css({
        color: ($input.val().toLowerCase() == 'facebook') ? 'blue' : 'inherit'
    });

});

小提琴-

如果要在文本中的任何位置匹配“Facebook”（不区分大小写），请使用：

color: ($input.val().match(/Facebook/i)) ? 'blue' : 'inherit'

---

您不能只使用一个简单的

，您需要一个

内容可编辑的
div
或其他元素。以下是您想要的示例：

HTML:


这里的用户类型。。。

JavaScript:

var sDiv=document.getElementById('stuffdiv');
sDiv.onkeypress=function(){
    setTimeout(function(){
        //the setTimeout is so the content is inserted before execution
        document.getElementById('submittext').value=sDiv.textContent;
        if(sDiv.innerHTML.indexOf('facebook')!==-1){
            sDiv.innerHTML=sDiv.innerHTML.replace('facebook','<span style="color:blue">face<span></span>book</span>');
        }
    },50);
}

var sDiv=document.getElementById（'stuffdiv'）；
sDiv.onkeypress=函数（）{
setTimeout（函数（）{
//setTimeout设置为，以便在执行之前插入内容
document.getElementById（'submittext'）。value=sDiv.textContent；
if（sDiv.innerHTML.indexOf（'facebook'）！=-1）{
sDiv.innerHTML=sDiv.innerHTML.replace（'facebook'，'facebook'）；
}
},50);
}

jsIDLE:
您不能更改输入中部分值的颜色。不，您只能更改所有值的颜色text@adeneo：但是！您可以使用与输入相同的文本创建一个元素，匹配字体，将其精确定位在输入的实际文本上，并使其除给定单词外的所有文本都具有透明的颜色！当然，当用户输入更多内容时，您必须修改输入内容滚动的位置，这可能因浏览器而异。不过没那么难。@shnisaka：你的问题意味着你希望“facebook”这个词是蓝色的，但是输入中的任何其他文本都不应该是蓝色的。例如，如果用户在输入中键入“What's Facebook then？”，则“Facebook”应为蓝色，但“What's”和“then？”不应为蓝色。因此，为什么不使用CKEditor或TinyMCE，去掉所有的chrome？这不是完美的，但却是一个好方法。问题是，它会改变facebook输入的所有内容。“什么是facebook？”将是蓝色的。我只想给“脸谱”一个字涂上颜色@shnisaka：而且，正如我们已经告诉过你的，这是不可能的。我会接受这个答案，因为这是我见过的最接近的东西。
var sDiv=document.getElementById('stuffdiv');
sDiv.onkeypress=function(){
    setTimeout(function(){
        //the setTimeout is so the content is inserted before execution
        document.getElementById('submittext').value=sDiv.textContent;
        if(sDiv.innerHTML.indexOf('facebook')!==-1){
            sDiv.innerHTML=sDiv.innerHTML.replace('facebook','<span style="color:blue">face<span></span>book</span>');
        }
    },50);
}