JavaScript限制文本輸入字符

我想限制文本框的輸入字符爲[a-z0-9_-]。但是，每當如果這樣的按鈕退格鍵和箭頭鍵不起作用。我在本網站和其他網站上發現了一些嘗試，但是它們無法在所有瀏覽器上正常工作，或者它們使用黑名單。例如W3Schools website example黑名單號碼。有沒有辦法使用白名單（上面的那個），並仍然允許像退格鍵，箭頭，家庭，結束等鍵？或者，我是否必須添加與我想允許的鍵匹配的所有關鍵代碼？我做這樣的事情（爲了簡單起見，這個縮短了）。JavaScript限制文本輸入字符

編輯 - 增加了代碼

<input type="text" onkeypress="return checkInput();"> 
    function checkInput(){ 
     return /[a-z0-9_-]/gi.test(String.fromCharCode(window.event.keyCode)); 
    }

感謝

來源

2011-04-04 Timothy Ruhle

-1因爲您已經將w3schools與[w3c]（http://www.w3.org/）網站混淆了。我承諾刪除-1，如果你更正你的答案（我知道我可以編輯它，但那麼有可能你不明白[爲什麼]（http://www.w3fools.com/）。 – zzzzBov 2011-04-04 03:44:56

我知道w3c學校不是最好的，但這是我能找到的最好的例子 – 2011-04-04 03:49:47

Facepalm ....... – awm 2011-04-04 03:51:36

的例子中的正則表達式就變成這樣的：

numcheck = /[^a-z0-9_-]/;

或者更好的是，避免了雙重否定與：

numcheck = /[a-z0-9_-]/; 
return numcheck.test(keychar);

然後你可以看一下退格鍵等的鍵碼，並檢查對他們來說太：

if (keychar === 8) return true; 
...

甚至把它們放在你的正則表達式：

numcheck = /[a-z0-9_\x08-]/;

來源

2011-04-04 03:41:36 awm

它仍然不起作用，將它改爲！/ [^ a-z0-9 _-]。test（）不起作用 – 2011-04-04 03:44:56

如果輸入正確，它會起作用 – awm 2011-04-04 03:50:49

我在我的合作德....我不知道我可以做你的例子中的最後一行代碼。讓我讀完MDC上關於RegExp的整個頁面。 – 2011-04-04 03:53:19

您沒有提供任何代碼樣本，因此在回覆中很難具體，但作爲一般策略，請嘗試這樣做：不要嘗試將輸入時可以輸入的字符列入白名單，而要在每次擊鍵後驗證文本框的內容以確保它仍然包含有效的字符。如果沒有，請刪除最後輸入的字符。

這種方法將允許像退格等特殊的鍵，同時實現它聽起來像你真的在之後：在文本框中的有效值。

來源

2011-04-04 03:44:20

但是，輸入的中間字符或複製/粘貼如何？ – 2012-12-11 01:59:17

是的，你可以限制字符的輸入。例如創建，檢查到底是怎麼回事的功能，如果一切正常，假如果不返回true：

// return true for 1234567890A-Za-z - _ 
function InputCheck(e) { 
    if ((e.shiftKey && e.keyCode == 45) || e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) { 
     if (e.which == 45 || e.which == 95 || (e.which >= 65 && e.which <= 90) || (e.which >= 97 && e.which <= 122)) 
      return true; 
     return false; 
    } 
    return true; 
}

一旦你具備的功能，把它掛到您的輸入（這是使用jQuery）：

$('#InputID').keypress(InputCheck);

你可以那樣複雜，只要你想的檢查，比如這將使美元貨幣價值：

function InputCheck(e) { 
    if ((e.shiftKey && e.keyCode == 45) || e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57) && e.which != 46 && e.which != 36) { 
     return false; 
    } 
    // . = 46 
    // $ = 36 
    var text = $(this).val(); 

    // Dollar sign first char only 
    if (e.which == 36 && text.length != 0) { 
     return false; 
    } 

    // Only one decimal point 
    if (e.which == 46 && text.indexOf('.') != -1) { 
     return false; 
    } 

    // Only 2 numbers after decimal 
    if (text.indexOf('.') != -1 && (text.length - text.indexOf('.')) > 2) { 
     return false; 
    } 

    return true; 
}

來源

2011-04-04 03:45:23 Justin808

你可以按你喜歡的，只要任一鍵，你保持值不包括任何東西不在白名單中。

inputelement.onkeyup=function(e){ 
    e=e || window.event; 
    var who=e.target || e.srcElement; 
    who.value= who.value.replace(/[^\w-]+/g,''); 
}

來源

2011-04-04 04:18:56 kennebec

將此代碼添加到onkeypress事件中。

var code; 
    document.all ? code = e.keyCode : code = e.which; 
    return ((code > 64 && code < 91) || (code > 96 && code < 123) || code == 8 || code == 32 || (code >= 48 && code <= 57));

瀏覽器兼容性，您可以添加 變種K = e.keyCode == 0？ e.charCode：e。關鍵代碼;

來源

2015-11-02 13:13:08 Pradeepta

JavaScript限制文本輸入字符

回答

相關問題