При разработке сайтов, возникает задача, получить значение поля по умолчанию и сравнить его с текущим значением. К примеру, это может потребоваться, тогда, когда мы отправляем изменение формы. Совсем не обязательно отправлять на сервер все данные. Достаточно отправить лишь измененные поля. 

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

Второй способ, это повесить на поле ввода обработчики событий change, keyup, mouseup, в которых добавлять к полю некий атрибут, который будет говорить о его изменении. В коде это будет выглядеть как-то так

var i, elms = document.getElementsByTagName('input'), timer;

function onchange(){
   clearTimeout(timer);
   timer = setTimeout(function(){
      this.setAttribute('changed',true);
   },100);
}

for(i=0;i<elms.lengthi++){
   elms[i].addEventListener('change',onchange);
   elms[i].addEventListener('keyup',onchange);
   elms[i].addEventListener('mousedown',onchange);
}

или при использовании jQuery

$('input').on('change keyup mouseup',function(){
   $(this).attr('changed',true);
});

Но в таком случае, поле будет помечено, как измененное при любом действии с ней, даже если вы просто кликните по ней мышкой. 

Более верным вариантом в таком случае было бы проверять, равно ли значение элемента, его значению по умолчанию (это значение было в нем при загрузке страницы). 

У текстовых элементов input, есть такое поле как defaultValue. Для элементов типа select получить значение по умолчанию, незначительно сложнее. Оформим в виде плагина jQuery

$.fn.defaultValue = function(){
	var value;

	if( this[0].defaultValue )
		return this[0].defaultValue;

	this.find('option').each(function(){ 
		if( this.defaultSelected )
			value =this.value;
	});

	return value;
}

На нативном JavaScript это будет так

var defaultValue = function( elm ){
	var value;

	if( elm .defaultValue )
		return elm .defaultValue;

	[].map.call(elm .getElementsByTagName('option'),function( obj ){ 
		if( obj.defaultSelected )
			value =obj.value;
	});

	return value;
}

Теперь есть два сценария при отправке формы. Первый: проверить значения всех полей с дефолтовыми значениями, и отправить на сервер лишь измененные данные. Второй вариант: скомбинировать метку changed с проверкой defaultValue, а при отправке использовать только поля с этой пометкой. 

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

Желаю удачи. 

Рассказать друзьям

Добавить комментарий


Защитный код
Обновить