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值并显示“正在发送...请稍候......”并且根据是否存在问题或提交是否成功，内部会有相应的消息指示此类的#email字段。现在，当我在输入字段中单击时，“输入您的电子邮件地址”文本将消失.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'); });

focus()

这是你的jsfiddle，你可以查看一下。我还在{{1}}处理程序中添加了一个检查，以便在您输入电子邮件后单击输入字段时不会删除内容。

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

1 个答案: