将文本输入限制为字符列表

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
}

有关更多信息，请参阅this link。

Answer 2

如果你用输入的字符创建一个变量 chr，那么

acceptable.indexOf(chr) !== -1

如果字符是可接受的（在字符串中），则为真。

Answer 3

我将提出一个不使用正则表达式的解决方案，尽管我不明白这个限制。

这是一个验证字符串的合乎逻辑的建议。

获取您的输入字符串，将其中出现的每个有效字符替换为 ''（空字符串），然后验证长度是否为 0。如果剩余字符（长度 > 0），则验证不会通过。

另请注意，还有其他方法可以做到这一点。现代浏览器支持文本输入上的pattern 属性，它将根据正则表达式进行验证（在这种情况下编写起来很简单）。

Answer 4

这是demo 的实际操作。

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 5

我制作了一个基于 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、@987654329 @ 和 c。

只要确保你的 HTML 中有这个：

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

你应该很好地使用它。

如果 jQuery 不是一个选项，请留下评论，我将添加一些 jQuery-less 代码。

编辑：更改代码以允许使用箭头键、退格键、home、end 和 delete。

Answer 6

Rou 的代码是干净的，但 keycode 总是返回大写字母。如果您需要区分大小写，keycode 将不起作用。

我还假设您总是想检查最后输入的字符。

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/