Question

我想知道是否可以使用JavaScript和CSS自动为任何长度的文本添加颜色。例如，如果我在h1标记上使用contentEditable并且用户通过浏览器对其进行编辑，则会在同一区域中返回多色文本。第一个字母是一种颜色，第二个是另一种颜色，依此类推。不只是一种颜色，多种颜色。

是否可以使用7色图案继续使用，或者不可能？

Answer 1

我做了一点proof of concept (JSFiddle)。它基本上得到一个div contentEditable = true的文本，将每个字母包装在一个span中并将其放入输入div后面的div中。然后用一些CSS魔法完成着色。

#input {position: absolute; opacity: 0.0;}
#rainbow {position: absolute; background: #cccccc;}
#rainbow span:nth-child(7n+1) {color: blue;}
#rainbow span:nth-child(7n+2) {color: green;}
#rainbow span:nth-child(7n+3) {color: violet;}
#rainbow span:nth-child(7n+4) {color: yellow;}
#rainbow span:nth-child(7n+5) {color: cyan;}
#rainbow span:nth-child(7n+6) {color: orange;}
#rainbow span:nth-child(7n+7) {color: red;}

这是JS：

function wrapInSpans(str) {
    wrappedStr = "";
    for (var i = 0, len = str.length; i < len; i++) {
        wrappedStr += "<span>" + str[i] + "</span>";
    }
    return wrappedStr;
}
function rewrapContent(objSrc, objTarget) {
    objTarget.innerHTML = wrapInSpans(objSrc.innerText);
}
input = document.getElementById("input");
input.contentEditable = true;
rainbow = document.getElementById("rainbow");
rainbow.contentEditable = true;
input.addEventListener("input", function() {
    rewrapContent(input, rainbow);
}, false);
rewrapContent(input, rainbow);

HTML：

<div>
    <div id="rainbow"></div>
    <div id="input">Lorem ipsum dolor sit amet.</div>
</div>

目前唯一的问题是隐藏的input-div的文本光标也是不可见的。对不起，我不知道如何解决这个问题。

自动着色文字| JS CSS HTML

1 个答案: