javascript - 如何为文本字段中的每个字母赋予不同的颜色？

Question

我有一个输入文本字段，如 this ,

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，因为如果用户使用 IME 输入文本，keypress/keyup 将破坏代码。

作为Billy Mathews提到过，人们可能想要一个可以通过 form 提交的 input。这是一个解决方案:

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

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

---

纯属娱乐

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