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/

Answer 2

如果你想改变整个词......

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

    var $input = $(this);

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

});

小提琴 - http://jsfiddle.net/vTSDk/2/

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

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

键入时更改单词的颜色

2 个答案: