如何为文本字段中的每个字母指定不同的颜色？

Question

我有一个像这样的输入文本字段,

input {
  color: red
}

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

我想在输入文本字段中为每个字母应用不同的颜色,如果用户输入hai每个字母,h,a,i则相邻的字母应该具有不同的颜色.让我选择红色和黄色.在jQuery,css中有没有办法呢？

Answer 1

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

keypress如果用户只想使用普通键盘输入,您实际上可以将事件设置为.我blur在这里使用,因为keypress/keyup如果用户使用IME输入文本,将会破坏代码.

正如Billy Mathews所说,人们可能希望有一个input可以提交的form.这是一个解决方案:

<input type="hidden" id="hiddenEle">

var chars = $(this).text().split("");
$("#hiddenEle").val($(this).text());
this.innerHTML = "";

纯娱乐

这是一个不会改变颜色的:http://jsfiddle.net/DerekL/A7gL2/