实现文本框差异化录入颜色

我做了一个input文本框,代码如下:

Name:<input type="text" name="text" class="text" />

我想设置input文本框里每个字母的颜色,比如用户输入HAI,文本框应默认将HAI拆分为H,A,I自动配备差异颜色。实现效果:
在jQuery和CSS里可以实现吗?

原问题:How can I give different color for each letter in a text field?

已邀请:

Derek朕會功夫:如果用户是正常输入,你应该设置keypress。但我下面的代码中使用了blur,之所以没有使用keypress/keyup,是因为用户使用输入法输入会导致代码失效,而blur则不会。DEMO:http://jsfiddle.net/DerekL/Y8ySy/

$("body").prop("contentEditable", true).blur(function(){
    var chars = $(this).text().split("");
    this.innerHTML = "";
    $.each(chars, function(){
        $("<span>").text(this).css({
            color: "#"+(Math.random()*16777215|0).toString(16)  //just some random color
        }).appendTo("body");
    });
});

此外,还有一种不能随机改变颜色的效果:http://jsfiddle.net/DerekL/A7gL2/

要回复问题请先登录注册