javascript - 实现文本框差异化录入颜色-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - 实现文本框差异化录入颜色

怪我咯 2017-04-10 13:11:51

[JavaScript讨论组]

776

我做了一个input文本框，代码如下：

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

我想设置input文本框里每个字母的颜色，比如用户输入HAI，文本框应默认将HAI拆分为H,A,I自动配备差异颜色。实现效果：
在jQuery和CSS里可以实现吗？

原问题：How can I give different color for each letter in a text field?

怪我咯

走同样的路，发现不同的人生

全部回复(1)

PHP中文网2017-04-10 13:13:51 1楼

Derek朕會功夫：如果用户是正常输入，你应该设置keypress。但我下面的代码中使用了blur，之所以没有使用keypress/keyup，是因为用户使用输入法输入会导致代码失效，而blur则不会。DEMO：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");
    });
});

此外，还有一种不能随机改变颜色的效果：http://jsfiddle.net/DerekL/A7gL2/