字符計數器上奇怪的jQuery錯誤

Question

我試圖做一個簡單的字符計數器，它顯示用戶是否輸入最小數量的字符，然後才能按下輸入。

$(document).ready(function(){ 

$('#notification').hide(); 
$('#press_enter_notification').hide(); 

    var allow_enter = false; 
    var min = 4; 
    var max = 30; 
    var char_count = 0; 

    $("#form_textbox").keydown(function() { 

     $('#press_enter_notification').hide(); 

     if(this.value.length < min) { 
     char_count = min - (this.value.length) -1; 
     //alert('Too short'); 
     $('#notification').show("fast"); 
     $('#notification').text(char_count + ' more characters to go'); 
     allow_enter = false; 

     } else if(this.value.length >= max) { 
     char_count = (this.value.length) - max; 
     this.value = this.value.substring(0,max); 
     $('#notification').show("fast"); 
     $('#notification').text(' no more characters remaining'); 

     } else { 
     char_count = max - (this.value.length) -1; 
     $('#notification').show("fast"); 
     $('#notification').text(char_count + ' characters remaining'); 
     $('#press_enter_notification').show("fast"); 
     allow_enter = true; 
     } 
    }); 

    $("form").submit(function() { 
     if (allow_enter == false) 
     { 
     $('#press_enter_notification').show("fast").text('you cannot press enter yet'); 
     return allow_enter; 
     } 
    }); 


}); 

它的工作原理，但它具有以下怪癖：

1. 當你輸入的東西，並刪除所有文字，字符計數消息犯規dissapear，或當你刪除計數向後
2. 它所說的3個字符，我必須在if(this.value.length < min) { char_count = min - (this.value.length) -1;加-1，否則它可以讓你輸入5個字符，然後再停止說3,2,1個字符。

如果你在瀏覽器或jsbin中試試這個，你會注意到它們。我怎樣才能構建這個排序呢？

謝謝。

Answer 1

您需要將keydown()更改爲keyup()，因爲長度未被註冊，直到按鍵完全完成。你需要檢查keydown的唯一事情是，如果你阻止了諸如return或tab之類的默認值。

你現在也可以刪除-1 hack。

JS小提琴：http://jsfiddle.net/VPD3j/

Answer 2

的問題之一是，該按鍵的動作之前​​火災時運行。您可以通過更改爲keyup來解決此問題。儘管在按鍵上有字符計數器（不管keydown，keyup等），但仍有許多問題。例如，如果一個人按下按鈕，甚至會發生一次。

我會考慮尋找已經創建的插件之一。 http://plugins.jquery.com/plugin-tags/character-counter

編輯：輕微的修改，你可能想綁定keyup，keydown和按鍵。這可以解決幾個問題：

$("#form_textbox").bind("keydown keyup keypress"...