如何使用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事件，将“邮政编码”字段的值设置为“邮政编码”。呸。

我该如何解决这个问题？有没有办法在调用＃submit.click事件之后才调用＃zipcode.blur事件？

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);
});

为重置添加一点延迟，因此提交功能可以启动。时间无关紧要，只要它在提交处理程序完成后将函数排队等待。