2013-11-21 5 views
2

여기에있는 mailcheck 코드를 사용하고 있습니다 : https://github.com/Kicksend/mailcheck 이메일을 잘못 입력하면 "suggestion"이 표시됩니다.키보드 타이머의 JQuery mailcheck

나는 하나 개의 입력 이메일 상자와 제안 텍스트가 나타납니다 사업부가 있습니다

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

는 어떻게 입력 상자에의 keyup jQuery를 타이머를 적용 할 다음 MAILCHECK 활성화습니까? 감사!

UPDATE 여기

내 업데이트 된 코드는 다음과 같습니다 var에 $ 이메일 = $ ('# 메일'); 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

이것은'문제가 될 것입니다. if ($ ('# email') .val)'val()'에'''missing ( – 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; 
});