2013-11-21 27 views
2

我使用這裏找到的這個mailcheck代碼:https://github.com/Kicksend/mailcheck如果你拼寫錯誤,你會得到一個「建議」。鍵盤計時器上的JQuery mailcheck

我有一個輸入電子郵箱和一個div,其中的建議文本將出現:

<form id="mailcheck-test"> 
    <label for="email">Email</label> 
    <input id="email" type="text"> 
</form> 
<div id="hint"></div> 

我該如何申請一個KEYUP jQuery的定時器的輸入框,然後讓MAILCHECK激活?謝謝!

UPDATE

這是我更新的代碼: 變量$電子郵件= $( '#電子郵件'); var $ hint = $(「#hint」); var typingTimer; //定時器標識符 var doneTypingInterval = 1000; //以ms爲單位的時間,例如5秒

$('#email').keyup(function(){ 
    $hint.css('display', 'none').empty(); 
clearTimeout(typingTimer); 
$(this).mailcheck({ 
    suggested: function(element, suggestion) { 
    typingTimer = setTimeout(function(){  
       if(!$hint.html()) { 
     // First error - fill in/show entire hint element 
     var suggestion = "Yikes! Did you mean <span class='suggestion'>" + "<span class='address'>" + suggestion.address + "</span>" + "@<a href='#' class='domain'>" + suggestion.domain + "</a></span>?"; 
      $hint.html(suggestion).fadeIn(150); 
      } else { 
      // Subsequent errors 
     $(".address").html(suggestion.address); 
     $(".domain").html(suggestion.domain); 
      } 
      }, doneTypingInterval); 
     } 
    }); 
}); 

$hint.on('click', '.domain', function() { 
    // On click, fill in the field with the suggestion and remove the hint 
    $email.val($(".suggestion").text()); 
    $hint.fadeOut(200, function() { 
     $(this).empty(); 
    }); 
    return false; 
}); 
+0

好吧,我已經發布了我的代碼。我以爲我只是將mailcheck代碼插入到keyup函數中。 – Dawn

+0

這將是一個問題'如果($('#email')。val)'缺少'()'爲'val()' – charlietfl

+0

嗨charlietfi。我更新了我的代碼。我得到它的工作,但我想增加一個延遲的功能。我仍然在研究如何讓這個工作。 – Dawn

回答

1

我終於搞定了!這裏是一個工作演示:http://jsfiddle.net/dswizzles/jCWFe/1

var $email = $('#email'); 
var $hint = $("#hint"); 
var typingTimer;    //timer identifier 
var doneTypingInterval = 1000; //time in ms, 5 second for example 

$('#email').keyup(function(){ 
    $hint.css('display', 'none').empty(); 
clearTimeout(typingTimer); 
$(this).mailcheck({ 
    suggested: function(element, suggestion) { 
     if(!$hint.html()) { 
     // First error - fill in/show entire hint element 
     var suggestion = "Yikes! Did you mean <span class='suggestion'>" + "<span class='address'>" + suggestion.address + "</span>" + "@<a href='#' class='domain'>" + suggestion.domain + "</a></span>?"; 
     typingTimer = setTimeout(function(){     
      $hint.html(suggestion).fadeIn(150); 
     }, doneTypingInterval); 
     } else { 
     // Subsequent errors 
     $(".address").html(suggestion.address); 
     $(".domain").html(suggestion.domain); 
     } 
     } 
    }); 
}); 

$hint.on('click', '.domain', function() { 
    // On click, fill in the field with the suggestion and remove the hint 
    $email.val($(".suggestion").text()); 
    $hint.fadeOut(200, function() { 
     $(this).empty(); 
    }); 
    return false; 
});