Зникаючий текст в поле введення HTML5 і jQuery

Дуже часто клієнти вимагають, щоб текст в поле введення зникав при появі на ньому фокуса, і з’являвся назад при втраті фокуса і за умови що в поле нічого не було введено.

У HTML5 це можна зробити використовуючи атрибут data- і jQuery.

Розмітка в цьому випадку буде виглядати наступним чином:

<input type="text" value="Placeholder text" data-value="Placeholder text"/>

jQuery код буде наступним:

$('body').on('focus', 'input[type=text]',function() {
    if ($(this).val() == $(this).data('value')) {
        $(this).val('');
    }
}).on('blur', 'input[type=text]',function() {
    if ($(this).val() == '') {
        $(this).val($(this).data('value'));
    }
});