Question

我有一个小脚本，可以根据输入的长度更改背景颜色和输入文本。我想做一个改变，但我无法弄清楚具体如何。我想改变只改变颜色的字母，而不是改变整个输入文本的颜色。所以字母一个接一个地改变颜色。下面是我的行，它所调用的元素是＆＃34; ids＆＃34;。我需要说一些像＆＃34; ins [i]＆＃34;但我不知道究竟是怎么回事。 http://jsbin.com/janukece/1/edit

document.getElementById("ids").style.color= '#' + Math.random().toString(16).slice(2, 8);

我将不胜感激任何帮助。谢谢。

Answer 1

样式应用于HTML元素 - 字母不是HTML元素，因此您无法像想象的那样直接进行。尝试像

这样的东西

<span id="letter0">T</span><span id="letter1">E</span><span id="letter2">S</span><span id="letter3">T</span>

然后将样式应用于span元素。

Answer 2

您不能在简单的输入中使用不同的多色字母，但您可以使用HTML5 contenteditable属性和每个字母的span容器来构建它。

此示例使用jQuery：

// we have a hidden input field and a div container for our coloured letters.
// we change the colours when the hidden input looses focus (blur event)    
$("div").prop("contentEditable", true).blur(function(){
        // get text from the div
        var divText = $(this);

        //and split to an array
        var chars = divText.split("");

        // set text as input field value
        $("#hidden").val(divText);

        // clear the div container
        $(this).html("");

        // generate a span for each letter from chars array, colour it and append to the div
        $.each(chars, function(){
            $("<span>").text(this).css({
                color: "#"+(Math.random()*16777215|0).toString(16)
            }).appendTo("div");
        });
    });

这在jsfiddle http://jsfiddle.net/DerekL/Y8ySy/

中显示

选择i以改变颜色

2 个答案: