How can I Give Each Word In An <input> A Random Colour
views:
189answers:
4
+4
A:
I don't think that's possible.
You could overlay text on top of it, but you're getting into thedailywtf territory there.
Greg
2009-06-05 07:16:05
+5
A:
You cannot change the Text colors inside an <input> field. You can however create a DIV under it or overlay it as suggested in a previous answer.
Here's an example that does that using 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> ';
}
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>
Random Color Function Source
Jose Basilio
2009-06-05 07:39:19
A:
You could use a div instead of an input.
Then give it CSS properties that makes it look an input.
And use the contentEditable property to edit it(an HTML5 thing that is supported by modern browsers and IE) if your browser audience allows it.
But then I guess you'll have to build something like a rich text editor "a la" google docs to allow your users to change the colors, which will guarantee you some funny working hours ;)
Mic
2009-06-05 09:30:39