Разный стиль текста в текстовом поле

[tematika]

Есть поисковая форма:

<div id="buscar">
<form name="search" method="get" action="/search/">
<input type="text" id="search-text" name="q" value="поиск"/>
<button id="button-buscar">Найти</button>
</form>
</div>

Стиль у неё такой:

#buscar {height:31px;margin-right:10px;display:inline;}
#buscar * {height:25px;float:left;border:0;margin:0;padding:0;background-color:#fff;}
#buscar #search-text {width:200px;height:25px;padding-left:3px;font-size:12px;font-weight:bold;font-family:Arial;color:#ccc;background-color:#fff;}
#buscar button {padding-bottom:2px;border:0;margin-left:0px;line-height:22px;width:47px;font-weight:bold;font-family: Tahoma,Verdana,sans-serif;font-size: 11px;;color:#000;}
#buscar button#button-buscar {background-color:#4f4f4f;color:#fff;cursor:pointer;}

и всё это дело обрабатывается скриптом:

function addtext(obj,evt,func) {
   var oldhandler = obj[evt];
   obj[evt] = (typeof obj[evt] != 'function') ? func : function(){
	  oldhandler();func();
   };
}

var Searchbar = {
   init : function()
   {
	  var sBar = document.getElementById('search-text');
	  if (sBar)
	  {
		 addtext(sBar,'onclick',Searchbar.click);
		 addtext(sBar,'onblur',Searchbar.blur);
	  }
   },
   click : function()
   {
	  var sBar = document.getElementById('search-text');
	  if (sBar.value == 'Search' || sBar.value == 'поиск')
	  {
		 sBar.value = '';
	  }
   },
   blur : function()
   {
	  var sBar = document.getElementById('search-text');
	  if (sBar.value == '' || sBar.value == ' ') {
		 sBar.value = 'поиск';
	  }
   }
};

addtext(window,'onload',Searchbar.init);

По умолчанию, в текстовом поле показывается надпись 'поиск':

При вводе текста, надпись 'поиск' убирается, предоставляя чистую форму для набора текста:

Подскажите пожалуйста, как изменить цвет текста при наборе?

Edited January 31, 2010 by tematika

[psywalker]

2 Варианта

1) В джаве вот этой переменной sBar прописать стиль и нужный цвет

2) В ЦСС тоже самое, инпуту

[mini]

на сколько я понял, Вам нужно что набор был другим цветом, В общем вуам нужна эта строчка

onfocus="style.color='#000';"

для вставки в JS нужна эта строчка

sBar.style.color='#000';

не проверял но мне кажется что нужно ставить ёё сюда, если конечно я не ошибаюсь.

click : function()

{

var sBar = document.getElementById('search-text');

if (sBar.value == 'Search' || sBar.value == 'поиск')

{

sBar.value = ''; sBar.style.color='#000';

}

},

[tematika]

  mini said:

на сколько я понял, Вам нужно что набор был другим цветом, В общем вуам нужна эта строчка

onfocus="style.color='#000';"

для вставки в JS нужна эта строчка

sBar.style.color='#000';

Спасибо! Всё отлично работает.

Сделал так:

click : function()
   {
	  var sBar = document.getElementById('search-text');
	  if (sBar.value == 'Search' || sBar.value == 'поиск')
	  {
		 sBar.value = ''; sBar.style.color='#000';
	  }
   },
   blur : function()
   {
	  var sBar = document.getElementById('search-text');
	  if (sBar.value == '' || sBar.value == ' ') {
		 sBar.value = 'поиск'; sBar.style.color='#ccc';
	  }
   }
};

[mini]

  tematika said:

Спасибо! Всё отлично работает.

Сделал так:

click : function()
   {
	  var sBar = document.getElementById('search-text');
	  if (sBar.value == 'Search' || sBar.value == 'поиск')
	  {
		 sBar.value = ''; sBar.style.color='#000';
	  }
   },
   blur : function()
   {
	  var sBar = document.getElementById('search-text');
	  if (sBar.value == '' || sBar.value == ' ') {
		 sBar.value = 'поиск'; sBar.style.color='#ccc';
	  }
   }
};

смотрите у вас свервано это JS работает по id, не проще для этого инпута в HTML прописать пару строк, вот вам линка изучайте

http://design.originweb.info/dhtml/onblur.html