在<input>随机颜色中给每个单词

0 html javascript xhtml

如何以<input>随机颜色给每个单词

Jos*_*lio 5

您无法更改<input>字段内的文本颜色.但是,您可以在其下创建DIV或按照上一个答案中的建议覆盖它.

这是使用Plain Old Javascript执行此操作的示例.

<html>
<head>
<title>Random Colors</title>
<script>
window.onload = function(){
  var mytextbox = document.getElementById("mytext");
  mytextbox.onblur = function(){
     var words = mytextbox.value.split(' ');
     var myDiv = document.getElementById("divText");
     myDiv.innerHTML = '';
     for(i = 0, len = words.length; i<len;i++){
        myDiv.innerHTML += '<span>' + words[i] + '</span>&nbsp;';
     }
     var spans = myDiv.getElementsByTagName('span');
     for(i = 0, len = spans.length; i<len; i++){
        spans[i].style.color = random_color();
     }
  }
}
function random_color()
{
   var rint = Math.round(0xffffff * Math.random());
   return ('#0' + rint.toString(16)).replace(/^#0([0-9a-f]{6})$/i, '#$1');  
}
</script>
</head>
<body>
<input type="text" id="mytext" />
<div id="divText"></div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

随机颜色函数