How can I give different color for each letter in a text field?

Answer 1

Update: Fixed the CTRL+A DEL problem. 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 += '' + text[i] + '';
            }
        }
        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);
            }        
        }
    }
}

---

Even though the question is answered, I wanted to post my answer. Might come handy to future viewers.

In this one color change happens while typing, and it remembers the color order until the div is completely cleared.

And I know it's not perfect. Yet. Play with it.

FIDDLE

_{setEndOfContenteditable function taken from 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 += '' + text[i] + '';
        }
    }
    setEndOfContenteditable(input);
}