Как я могу подделать заполнитель текста с помощью JavaScript?

Question

У меня есть очень маленькая форма, где пользователь может ввести свой почтовый индекс в поле ввода и либо нажать клавишу ввода, либо нажать кнопку отправки, чтобы отправить свой почтовый индекс в нашу базу данных, которая возвращает результаты поиска на страницу. Все отлично работает с помощью клавиши Enter. Вещи не работают так хорошо, когда пользователь нажимает кнопку «Отправить» ...

Причина в том, что текст поля Zip Code по умолчанию - «Zip Code». Когда элемент имеет фокус, используя jQuery, я устанавливаю val () в ''.

$( 'div.program-locator input#zipcode' ).focus(function() {
  $( this ).val( '' );
});

Когда фокус покидает поле, я использую событие .blur, чтобы установить для поля значение "Почтовый индекс".

$( 'div.program-locator input#zipcode' ).blur(function() {
  $( this ).val( 'Zip Code' );
});

Проблема заключается в том, что когда пользователь нажимает кнопку «Отправить», вызывается событие .blur, устанавливающее значение поля «Почтовый индекс» в «Почтовый индекс». Тьфу.

Как я могу обойти это? Есть ли способ не вызывать событие # zipcode.blur до тех пор, пока я не вызову событие # submit.click?

Answer 1

Поместите условие в вашу функцию размытия.

if($(this).val()==""){
    $(this).val("Zip Code");
}

Answer 2

Я бы сказал, что самое простое решение:

$( 'div.program-locator input#zipcode' ).blur(function() {
  setTimeout(function() { $('#zipcode').val( 'Zip Code' ); }, 10);
});

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