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时，可能希望input可以提交form。这是一个解决方案：

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

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

只是为了好玩

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

Answer 2

为什么不让输入的字体不可见，并有一些javascript动态更改输入时输入的一些文字？像这样：

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

JavaScript的：

$(document).ready(function(){
    $('.text').keyup(function(){
        var output="";
        var letters = $(this).val().split("");
        letters.forEach(function(letter){
            var color = "#"+(Math.random()*16777215|0).toString(16);
            //Stolen from Derek's answer ;)
            output += '<span style="color: ' + color + ';">' + letter + '</span>';
          $('div.colors').html(output);
        });
    });
});

然后你只需将div放在输入上;瞧！ ~~未经测试..但我现在正在制作一个jsFiddle！~~ http://jsfiddle.net/pranavcbalan/54EY4/6/

Answer 3

更新：修复了CTRL+A DEL问题。 FIDDLE

var input = document.getElementById("input");
input.onkeydown = colorTheText;

function generateRandomColor() {
    var color = [];
    for (var i = 0; i < 3; i++) {
        color.push(Math.floor(Math.random()*250));
    }
    return color;
}

function rgbToHex(color) {
    var hex = [];
    for (var i = 0; i < 3; i++) {
        hex.push(color[i].toString(16));
        if (hex[i].length < 2) { hex[i] = "0" + hex[i]; }
    }
    return "#" + hex[0] + hex[1] + hex[2];
}

function setEndOfContenteditable(contentEditableElement) {
    var range,selection;
    if(document.createRange) {
        range = document.createRange();
        range.selectNodeContents(contentEditableElement);
        range.collapse(false);
        selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

var colors = [];
var inputLength = 0;
var ctrl = [];

function colorTheText(e) {
    if (e.keyCode == 8) {
        if (ctrl.indexOf(17) > -1 && ctrl.indexOf(65) > -1) {
            input.innerHTML = "";
            ctrl.length = 0;
        }
    } else {
        var text = input.innerText;
        if (text.length > inputLength) {
            inputLength++;
            colors.push(generateRandomColor());
        } else {
            inputLength--;
            colors.pop();
        }
        input.innerHTML = "";
        text = text.split("");
        for (var i = 0; i < text.length; i++) {
            if (colors[i]) {
                input.innerHTML += '<span style="color:' + rgbToHex(colors[i]) + '">' + text[i] + '</span>';
            }
        }
        setEndOfContenteditable(input);        
        if (e.keyCode == 17) {
            ctrl.length = 0;
            ctrl.push(17);
        }
        if (e.keyCode == 65) {
            if (ctrl[0] == 17 && ctrl.length == 1) {
                ctrl.push(65);
            }        
        }
    }
}

<小时/> 即使问题得到解答，我也想发布我的答案。未来的观众可能会派上用场。

在这一次输入时会发生颜色变化，它会记住颜色顺序，直到完全清除div。

我知道这并不完美。然而。玩它。

FIDDLE

_{setEndOfContenteditable函数取自Nico Burn's answer.}

var input = document.getElementById("input");
input.onkeydown = colorTheText;

function generateRandomColor() {
    var color = [];
    for (var i = 0; i < 3; i++) {
        color.push(Math.floor(Math.random()*250));
    }
    return color;
}

function rgbToHex(color) {
    var hex = [];
    for (var i = 0; i < 3; i++) {
        hex.push(color[i].toString(16));
        if (hex[i].length < 2) { hex[i] = "0" + hex[i]; }
    }
    return "#" + hex[0] + hex[1] + hex[2];
}

function setEndOfContenteditable(contentEditableElement) {
    var range,selection;
    if(document.createRange) {
        range = document.createRange();
        range.selectNodeContents(contentEditableElement);
        range.collapse(false);
        selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

var colors = [];
var inputLength = 0;

function colorTheText(e) {
    var text = input.innerText;
    if (text.length > inputLength) {
        inputLength++;
        colors.push(generateRandomColor());
    } else {
        inputLength--;
        colors.pop();
    }
    input.innerHTML = "";
    text = text.split("");
    for (var i = 0; i < text.length; i++) {
        if (colors[i]) {
            input.innerHTML += '<span style="color:' + rgbToHex(colors[i]) + '">' + text[i] + '</span>';
        }
    }
    setEndOfContenteditable(input);
}

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

3 个答案:

只是为了好玩