在输入字段中显示错误/成功消息

Question

我有一个输入字段，要求输入电子邮件地址，然后是提交按钮。这是与此相关的代码：

HTML

<div class="email">

    <form action="handler.php" method="post" id="hgb-signup">
    <input type="text" name="email" id="email" value="Enter your email address">
    <input type="submit" name="submit" id="submit" value="&raquo;" />
    </form>

</div>

JAVASCRIPT

Event.observe(window, 'load', function() {
    jQuery('#email').focus(function() {
        jQuery(this).val('');
    });
    jQuery("#hgb-signup").submit(function(e){
        var dataString = jQuery(this).serialize();
        jQuery('#email').val('Sending... please wait...');
        jQuery.getJSON('handler.php?callback=?', {
            "sent_data": dataString }, 
            function(received_data) {
                jQuery('#email').val(received_data.message);
            }
        );
        e.preventDefault();
    });
});

现在，当页面加载时，#email 输入字段显示“输入您的电子邮件地址”。当您单击提交按钮时，它会用“正在发送...请稍候...”覆盖#email 值，并且根据是否存在问题或提交成功，@ 内将有相应的消息987654325@ 字段表示此类。现在，当我在输入字段内单击时，“输入您的电子邮件地址”文本消失 .val('')，当我在字段外单击时，该消息仍然消失。我最初有一个.blur() 将消息放回，这是预期的结果，但是，当用户输入他们的电子邮件地址并点击提交时，它会提交“输入您的电子邮件地址”而不是实际的电子邮件地址，因为当你点击了提交按钮 .blur() 被调用。

现在知道目标是什么，是否有 .blur() 替代方案，如果没有，我该如何最好地处理这种情况？

基本上，这就是我要找的东西：

当光标不在该字段内时，#email 字段应在任何给定时间显示“输入您的电子邮件地址”，并且在光标离开该字段时应返回，但我希望错误/成功消息留在提交表单后，除非用户在该字段内单击返回并离开，否则它可以再次说“输入您的电子邮件地址”。

谢谢！

Answer 1

使用.blur()，但首先检查val()。仅在为空时替换为"Enter your email"

jQuery('#email').blur(function() {
    var $this = jQuery(this);
    if ($this.val() == '') $this.val('Enter your email');
});

这是给你的jsfiddle，你可以看看。我还向focus() 处理程序添加了一个检查，这样当您在输入电子邮件后单击输入字段时它不会删除内容。