Question

我想在keypress上输入输入html文本输入字段的字符然后验证针对字符列表输入的字符如果在该列表中找不到，则返回false

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

by＆＃39; list＆＃39;我的意思是：

var acceptable = 'abcd12';

这可以防止，例如，角色＆＃39;正在进入，等等

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

如果字符可接受（在字符串中），

将为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

以下是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参数中是否存在该字符（在我看来没有使用不必要的正则表达式），如果是，我们通过将字符添加到{{1}来模拟正常行为如果没有，我们什么都不做，导致什么都没有输入。

希望这有帮助！

Answer 6

Rou的代码很干净，但是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/

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

6 个答案:

HTML

的JavaScript