twixed.ru huh… nothing interesting here

10Авг/110

Интерактивные поля ввода при помощи javascript

Маленький пост о том, как сделать поля ввода более интересными с точки зрения функциональности.
Для примера возьмем номер мобильного телефона. Допустим, на нашем сайте человек должен оставить номер своего мобильника для обратной связи. Использование "голого" 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-подгрузкой элементов страницы или их содержимого.

Post to Twitter Post to Digg Post to Facebook Post to Google Buzz Send Gmail Post to LinkedIn

Комментарии (0) Пинги (0)

Пока нет комментариев.


Leave a comment

Нет обратных ссылок на эту запись.