在輸入字段中顯示錯誤/成功消息

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()調用.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()處理程序添加了一個檢查，以便在輸入電子郵件后單擊輸入字段時，它不會刪除內容。