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

我有一个像这样的输入文本字段，

input { color: red } 

 Name:  

我想在输入文本字段中为每个字母应用不同的颜色，如果用户输入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(){ $("").text(this).css({ color: "#"+(Math.random()*16777215|0).toString(16) //just some random color }).appendTo("body"); }); }); 

如果用户只想使用普通键盘输入，您实际上可以将事件设置为keypress 。 我在这里使用blur ，因为如果用户使用IME输入文本， keypress/keyup将破坏代码。

正如Billy Mathews所提到的，人们可能想要一个可以通过form提交的input 。 这是一个解决方案：

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

---

纯娱乐

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

Answer 2

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

 
 Name: 
  

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 += '' + letter + ''; $('div.colors').html(output); }); }); }); 

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

Answer 3

更新 ：修复了CTRL+A DEL问题。 小提琴

 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); } } } } 

---

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

在这种情况下，在键入时会发生颜色更改，并且它会记住颜色顺序，直到完全清除div为止。

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

小提琴

_{setEndOfContenteditable函数取自Nico Burn的答案。}

 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); }