twixed.ru huh… nothing interesting here

Маленький пост о том, как сделать поля ввода более интересными с точки зрения функциональности.
Для примера возьмем номер мобильного телефона. Допустим, на нашем сайте человек должен оставить номер своего мобильника для обратной связи. Использование "голого" input'а чревато внесением в это поле любой текстовой информации - от одной буквы и до строчки из библии. Если мы просим человека ввести номер своего телефона, то и ожидать в серверном скрипте мы тоже будем номер. Но что делать, если вместо него пользователь введет "Здесь был Вася"? А если номер телефона используется в автоматической обработке, завязанной на номере телефона? Тогда в голову приходит мысль ограничить ввод, подогнав его под некий шаблон, с которым нам дальше будет удобно работать...

Использовать, конечно же, буду jQuery. В данный момент - версии 1.4.4, но все описанное должно быть работоспособным и на других версиях этой библиотеки.
Для сравнения, два input'а:

Преимущества - на лицо. Теперь даже без подписи понятно, что нужно вводить в это поле, и в каком формате. К тому же ввести что-либо, отличающееся от цифр не получится... и "+7" в начале, необходимую нам для дальнейшей обработки, тоже убрать не удастся. Теперь мы с большей степенью уверенности можем предполагать, что в серверный скрипт поступит именно то, что нужно, хотя дополнительных проверок еще никто не отменял.
Как же это сделано? Очень просто - четыре нехитрых обработчика:

$(document).ready(function(){
		$("input[name='phone']").bind("blur",function(){
				if(($(this).val()=="+7")||($(this).val()==""))
					$(this).css("color","#737373").val("+7xxxxxxxxxx");
			})
			.bind("focus",function(){
				if($(this).val()=="+7xxxxxxxxxx"){
					$(this).css("color","#000000").val("+7").focus();
				}
			})
			.bind("mousedown",function(){
				if($(this).val()=="+7xxxxxxxxxx"){
					$(this).css("color","#000000").val("+7").focus();
				}
			})
			.bind("keyup",function(){ 
    				$(this).val($(this).val().replace(/[^+0-9\.]/g,''));
	    			$(this).val($(this).val().substr(0,12));
	    			if($(this).val().length<2) $(this).val("+7");
			});
});

Аналогично можно поступить и с другими полями ввода, например, с полем ввода фамилии:

Код к этому input'у не будет отличаться от предыдущего:

$(document).ready(function(){
		$("input[name='fio']").bind("blur",function(){
				if(($(this).val()=="Фамилия, имя, отчество")||($(this).val()==""))
					$(this).css("color","#737373").val("Фамилия, имя, отчество");
			})
			.bind("focus",function(){
				if($(this).val()=="Фамилия, имя, отчество")
					$(this).css("color","#000000").val("");
			});
});

Вообще, можно подключить фантазию и умелку, и напридумывать различных вариаций с проверкой по регулярным выражениям, анимацией и AJAX-подгрузкой элементов страницы или их содержимого.