如何真正限制使用jQuery的輸入字段的可用字符？

我剛剛開始向註冊表單添加JS驗證，並且我想用Twitter風格的用戶名輸入字段（使用jQuery）。這意味着輸入僅限於某些字符，其他字符甚至不會出現。如何真正限制使用jQuery的輸入字段的可用字符？

到目前爲止，我有這樣的：

jQuery(document).ready(function() { 
jQuery('input#user_login').keyup(function() { 
    jQuery(this).val(jQuery(this).val().replace(/[^a-z0-9\_]+/i, '')); 
    }); 
});

此解決方案，但問題是，非法字符顯示，只要用戶沒有釋放的鍵（請原諒我糟糕的英國！），並且不會觸發按鍵事件。字符在輸入字段中閃爍一秒鐘然後消失。

理想的解決方案就是Twitter做它的方式：角色甚至不會顯示一次。

我該怎麼做？我想我必須以某種方式攔截輸入。

謝謝！

來源

2009-12-23 Ole Spaarmann

http://bassistance.de/jquery-plugins/jquery-plugin-validation/試過嗎？ – Kezzer 2009-12-23 14:36:24

請注意，用戶仍然可以操縱代碼併發送他們想要的任何內容，因此還需要服務器端的安全性和檢查。當然是 – Yossi 2009-12-23 23:07:12

！這只是爲了用戶的舒適！ – 2009-12-24 01:53:17

如果要限制用戶可以輸入，而不是將要處理的特定鍵的字符，你必須使用keypress，因爲這是該報告的文字信息，而不是關鍵代碼的唯一事件。這裏是限制字符在所有主流瀏覽器只是AZ字母（不使用jQuery）解決方案：

<input type="text" id="alpha"> 


<script type="text/javascript"> 

function alphaFilterKeypress(evt) { 
    evt = evt || window.event; 
    var charCode = evt.keyCode || evt.which; 
    var charStr = String.fromCharCode(charCode); 
    return /[a-z]/i.test(charStr); 
} 

window.onload = function() { 
    var input = document.getElementById("alpha"); 
    input.onkeypress = alphaFilterKeypress; 
}; 

</script>

來源

2009-12-23 14:37:38

謝謝，那是它，我修改了你的編碼一點，看看我的迴應。 – 2009-12-23 15:49:13

嘗試使用，而不是KEYUP

jQuery('input#user_login').keydown(function() {

除此之外的keydown：你選擇慢於它需要。 ID是唯一的，且速度最快，所以

jQuery('#user_login').keydown(function() {

應該足夠

你可能要考慮iself捕捉鍵碼，其分配給VAL

if (event.keyCode == ...)

而且之前，你考慮alt，ctls和shift鍵？

if (event.shiftKey) { 

if (event.ctrlKey) { 

if (event.altKey) {

來源

2009-12-23 14:26:35

使用keydown不起作用。它看起來像輸入還沒有到達jQuery（'輸入'）。var（）方法和非法輸入只在第二次擊鍵後被替換。所以在某種程度上它不起作用。 – 2009-12-23 14:28:47

所以，只是爲了確認，keyup，keydown和keypress不起作用？ – 2009-12-23 14:30:36

進一步編輯 - 你有沒有考慮捕獲event.keycode？ – 2009-12-23 14:33:38

-2

您可以使用輸入密碼最大長度屬性：info（這實際上是Twitter的做它的方式）。

來源

2009-12-23 14:52:08 Januz

-1。這不是OP要求的。 – 2009-12-23 15:11:32

「這意味着輸入僅限於某些字符，甚至不會出現其他字符。」我認爲這是，爲什麼複雜的JS路線，當它可以做更簡單，更快，使用普通的HTML？ – Januz 2009-12-23 16:57:37

不。我很清楚maxlength屬性。我想防止輸入字段中顯示某些字符（！「§/ $＆） – 2009-12-24 01:54:39

謝謝@TimDown，解決了這個問題！我稍微修改了你的代碼，以便接受退格和箭頭進行編輯（我發佈回覆以使用代碼格式）。

非常感謝。

function alphaFilterKeypress(evt) { 
    evt = evt || window.event; 

    // START CHANGE: Allow backspace and arrows 
    if(/^(8|37|39)$/i.test(evt.keyCode)) { return; } 
    // END CHANGE 

    var charCode = evt.keyCode || evt.which; 
    var charStr = String.fromCharCode(charCode); 

    // I also changed the regex a little to accept alphanumeric characters + '_' 
    return /[a-z0-9_]/i.test(charStr); 
} 

window.onload = function() { 
    var input = document.getElementById("user_login"); 
    input.onkeypress = alphaFilterKeypress; 
};

來源

2009-12-23 15:53:50

如何真正限制使用jQuery的輸入字段的可用字符？

回答

相關問題