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

Question

我想在按键时将字符输入到 html 文本输入字段然后根据字符列表验证输入的字符和 return false 如果在该列表中找不到它

（我不想使用正则表达式）

by 'list' 我的意思是：

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

我将提出一个没有正则表达式的解决方案，尽管我不理解该约束。

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

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

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

Answer 2

如果您使用输入的字符创建变量 chr，则

acceptable.indexOf(chr) !== -1

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

Answer 3

通常，您希望像这样将 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 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-less 代码。

编辑：更改代码以允许使用箭头键、退格键、主页、结束键和删除键。

Answer 5

这是一个 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 参数中是否存在该字符（在我看来没有使用不必要的正则表达式），如果是，我们通过将字符添加到 [=15= 来模拟正常行为] 的值，如果不是，我们将什么都不做，因此不会输入任何内容。

希望对您有所帮助！

Answer 6

Rou的代码很干净，但是keycode总是return大写字母。如果你需要它区分大小写，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/

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

restrict text input to a list of characters

javascript

regex

validation

input

HTML

JavaScript