JS/jQuery. Делаем подсказки в input:text поля.

Предлагаю вашему вниманию способ подписывания полей типа text. Все выглядит следующим образом - для поля задается бледный текст-подсказка (описание поля) по умолчанию, а при фокусе чистится. При потере фокуса, если значение поля осталось пустым, то возвращается текст подсказка. Все просто, но тем не менее очень удобно.  

<script type="text/javascript">
        function InputHelperIn ( obj, text )
	{
	    //если при фокусе значение поля равно значению подсказки, то чистим его и вешаем стили
		if ( obj.value == text )
		{
		    $( obj )
		        .css ( { color: '#000', fontStyle: 'normal' } )
		        .val ( '' );
		}
	}
	
	function InputHelperOut ( obj, text )
	{
	    //если при потере фокуса значение поля равно пустоте или значению по умолчанию,
            //то пихаем в него текст подсказки и вешаем стили подсказки
		if ( obj.value == '' || obj.value == text )
		{
		    $( obj )
		        .css ( { color: '#b3b3b3', fontStyle: 'italic' } )
		        .val ( text );
		}
	}
	
	function InputHelperCreate ( obj, text )
	{
	    //вешаем на поле эвенты. На фокус и потерю фокуса.
		$( obj )
			.bind ( 'focus', function () {
				InputHelperIn ( this, text );
			} )
			.bind ( 'blur', function () {
				InputHelperOut ( this, text );
			} );
			
		//первоначальный инит
		InputHelperOut ( obj, text );
	}

	$( document ).ready ( function () {
	    //пробегаемся по всем текстовым полям и колдуем над ними
	    InputHelperCreate ( $( 'input' ).get( 0 ), 'описание поля' );
	    InputHelperCreate ( $( 'input' ).get( 1 ), 'поиск' );
	    InputHelperCreate ( $( 'input' ).get( 2 ), 'введите что-нибудь' );
	} );
</script>

<input type="text" /><br />
<input type="text" /><br />
<input type="text" />

Есть небольшой глюк в опере. Почему-то не работает fontStyle = italic. Плюс нужно не забывать проверять на сервере значение полей - если value == '' || value == 'наш дефолтовый текст' Надеюсь кому-то будет полезно =)

Автор: http://peroon2.habrahabr.ru/



Опубликовал admin
12 Янв, Суббота 2008г.
Метан по лучшим ценам метан купить украина В супермаркете химки


Программирование для чайников.