javascript - 打字时更改单词的颜色

Question

我正在尝试为单词分配颜色。所以当有人输入这个词时……这个词会立即变成我为它指定的颜色。我在网上到处找，找不到任何例子或方法。有可能实现吗？

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

<input type="text"/>

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

如果这是“不可能的”，为什么 http://ckeditor.com/demo可以为特定的单词分配不同的颜色。

Answer 1

你不能只用一个简单的 <input type="text"> 做你想做的事, 你需要一个 contenteditable div或其他元素。这是您想要的示例:

HTML:

<div id="stuffdiv" contenteditable>
user types here...
</div>
<input type="hidden" name="whateva" id="submittext">

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);
}

jsfiddle:http://jsfiddle.net/markasoftware/Jwh9R/1/