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