將文本輸入限制為字符列表

Question

我想在鍵盤上輸入html文本輸入字段中的字符，然后針對字符列表驗證輸入的字符，如果在該列表中找不到該字符，則返回false

（我不想使用正則表達式）

“列表”是指：

var acceptable = 'abcd12';

例如，這將防止輸入字符“ e”，依此類推

html看起來像這樣：

<input id='someId' type='text' onkeypress='return check(this,event);'>

和javascript：

function check(element,e) {
    var acceptable = 'abcd12';
    // now get what character was entered
    // if it's in the list, return true
    // if it's not in the list, return false
}

Answer 1

通常，您需要像這樣將onChange事件處理程序綁定到輸入字段：

jQuery('#someId').change(function() {
    var acceptable = ['1', '2', 'a', 'b', 'y'];

    var text = jQuery(this).val();
    var allowed = true;

    // Loop through each character in the string
    var length = text.length;
    for (var i = 0; i < length; i++) {
        // This if condition is fulfilled if the character
        // is not in the array of acceptable characters
        if (jQuery.inArray(text[i], acceptable) != -1)
            allowed = false;
    }

    if (allowed)
        // The input is valid
    else
        // The input contains an unallowed character
});

重要：
您始終必須對通過表單提交的數據進行服務器端驗證。 任何人都可以弄亂腳本中的代碼和HTML代碼。 有許多方法可以將虛假數據發送到服務器，無論您采取什么措施來防止它。 因此，始終進行服務器端驗證非常重要 ，因為服務器環境完全由您控制。

邊注
僅當字段失去焦點時才觸發onChange事件處理程序。 如果您不希望這種行為，請使用以下方法：

jQuery('#someId').on('change keypress paste focus textInput input',function(){
    // The same code as above can be used here
}

有關更多信息，請參見此鏈接 。

Answer 2

如果使用輸入的字符創建變量chr，則

acceptable.indexOf(chr) !== -1

如果字符是可接受的（在字符串中），則為true。

Answer 3

盡管我不了解該約束，但我將提出不使用正則表達式的解決方案。

這是驗證您的字符串的合理建議。

輸入您的輸入字符串，將其中每個有效字符替換為'' （空字符串），然后僅驗證長度為0。如果剩余字符（長度> 0），則驗證不通過。

另請注意，還有其他方法可以執行此操作。 現代瀏覽器在文本輸入上支持pattern屬性，該屬性將針對正則表達式進行驗證（在這種情況下編寫起來很簡單）。

Answer 4

我做了一個基於jQuery的小型解決方案：

$(document).ready(function() {
  $('#input').keypress(function(e) {
    var allowed = '02468abc';
    var e = e||window.event;
    var k = e.keyCode||e.which;
    var r = allowed.indexOf(String.fromCharCode(k))!=-1;
    r = (k==8||(k>=35&&k<=40)||k==46)?true:r;

    if(!r) {
      e.returnValue = false;
      if(e.preventDefault)
        e.preventDefault();
    }
  });
});

添加要傳遞變量內的字符allowed ，在該代碼中，允許的字符是0 ， 2 ， 4 ， 6 ， 8 ， a ， b ，和c 。

只要確保您的HTML中包含以下內容即可：

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

您應該可以很好地使用它。

如果沒有jQuery，請發表評論，然后添加一些jQuery少的代碼。

編輯 ：更改了代碼，以允許使用箭頭鍵，退格鍵，起始，結束和刪除。

Answer 5

這是此操作的演示 。

的HTML

<input type="text">

的JavaScript

input = document.querySelector("input");
restrictChars(input, "abc");

function restrictChars(input, chars) {
    input.addEventListener("keypress", function (e) {
        e.preventDefault();
        var character = String.fromCharCode(e.keyCode);
        var isValid = chars.indexOf(character) != -1;
        if (isValid) {
            input.value += character;
        }
    });
}

基本上，我們防止keypress事件的默認行為（以防止鍵入），並使用它從event.keyCode獲取按下的鍵。 然后，我們測試該字符是否存在於chars參數中（我認為不使用不必要的正則表達式），如果存在，我們通過將字符添加到<input>的值中來模擬正常行為，如果並非如此，我們絕對不做任何事情，因此不會鍵入任何內容。

希望這可以幫助！

Answer 6

Rou的代碼很干凈，但是鍵碼將始終返回大寫字母。 如果您需要區分大小寫，則鍵碼將不起作用。

我還假設您總是要檢查輸入的最后一個字符。

function check(e,element) {
    var acceptable = 'abcd12';
    var char = element.value.charAt(element.value.length - 1);
    if(acceptable.indexOf(char)>=0){
        document.getElementById("result").innerHTML="true";
    }
    else
    {
        document.getElementById("result").innerHTML="false";
    }
}

var inputElement = document.getElementById('someId');
inputElement.addEventListener('keyup', function( e ) {
                check( e, inputElement )
});

如果要修改它，請參見以下JSFiddle中的代碼： http : //jsfiddle.net/hckytaez/4/