Дайте каждое слово в <input>случайном цвете - PullRequest
0 голосов
/ 05 июня 2009

Как я могу дать каждое слово в <input> случайном цвете

Ответы [ 4 ]

5 голосов
/ 05 июня 2009

Вы не можете изменить цвета текста внутри поля <input>. Однако вы можете создать DIV под ним или наложить его, как предложено в предыдущем ответе.

Вот пример, который делает это, используя Простой Старый 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>

Функция произвольного цвета Источник

4 голосов
/ 05 июня 2009

Я не думаю, что это возможно.

Вы можете наложить текст поверх него, но вы попадаете на ежедневную территорию там.

0 голосов
/ 05 июня 2009

Используйте что-то вроде YUI Editor или FCKEditor

0 голосов
/ 05 июня 2009

Вы можете использовать div вместо ввода.

Затем задайте ему свойства CSS, чтобы он выглядел как ввод.

И используйте свойство contentEditable для его редактирования (вещь HTML5, которая поддерживается современными браузерами и IE), если ваша аудитория браузера позволяет это.

Но тогда, я думаю, вам придется создать что-то наподобие текстового редактора "а-ля", который позволит вашим пользователям изменять цвета, что обеспечит вам несколько забавных рабочих часов;)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...