2012-05-29 72 views
0

輸入限制,我想用下面的代碼來限制輸入(字母)到文本字段:對於所選擇的jQuery插件

$('input').bind('keypress', function (event) { 
    var regex = new RegExp("^[a-zA-Z0-9]+$"); 
    var key = String.fromCharCode(!event.charCode ? event.which : event.charCode); 
    if (!regex.test(key)) { 
     event.preventDefault(); 
     return false; 
    } 
}); 

上面的代碼在一個標準的輸入欄的偉大工程,但是當我鍵入由Chosen生成的字段,該功能不適用。所選的插件確實生成了一個包含<input type="text">的div,但$('input')似乎沒有觸及它。我猜這是由於應用上述代碼的時間所致。

+0

難道你不能給'你'的'輸入'域的'class'屬性? – Rizstien

回答

1

傑克的答案奏效。但要了解的重要一點是keypress事件會產生泡沫,因此您可以在節點層次結構上的任何位置捕獲它,而不是動態生成的節點。

http://jsfiddle.net/KWv7Z/6/

$(document).bind('keypress', function (event) { 
    // Will fire for all elements, we only care for inputs 
    // Also allow navigation keypresses 
    if (event.target.tagName.toUpperCase() != "INPUT" || 
      $.inArray(event.which, [8,9,13,16,17,18,19,20,27,33,34,35,36,37,38,39,40,45,46])) { 
     return; 
    } 
    var regex = new RegExp("^[a-zA-Z0-9]+$"); 
    // jQuery already normalizes event.which 
    var key = String.fromCharCode(event.which); 
    if (!regex.test(key)) { 
     event.preventDefault(); 
     return false; 
    } 
}); 

這個,因爲它並不在頁面上安裝每輸入一個單獨的處理程序也更多的內存友好。

+0

感謝您的教訓胡安。真的很有價值,但它看起來像它不會做的伎倆選擇輸入字段=( – Abram

+0

@Abram:哪部分不工作?在前面的版本中是一個小錯誤,在回答中看到JSFiddle –

+0

我會在選擇的插件加載的時候在家嘗試這個,我嘗試使用JSFiddle上的添加資源選項加載它,但無濟於事。 – Abram

2

而不是.bind(),請考慮使用.on()這將適用於動態創建的元素。

+0

對不起傑克,不適合我的情況。這是關於選擇作品的方式我猜:( – Abram