【问题标题】：Jquery: filter input on keypressJquery：在按键上过滤输入
【发布时间】：2013-06-17 17:23:30
【问题描述】：

我有一个文本字段，它只接受以下字符：

允许的字符：[a-z 0-9 + # - .]

当您提出问题时，这与 SO 在“标签”字段中所做的过滤器相同。如果用户键入无效字符，我希望当前文本字段值保持不变。我试过了：

$('#post_tags').keypress(function(event){
    var char = String.fromCharCode(event.which)
    var txt = $(this).val()

    if (! txt.match(/[^A-Za-z0-9+#-\.]/)){
        $(this).val(txt.replace(char, ''));
    }
})

为什么它不起作用？谢谢！

【问题讨论】：

怎么不行？它做了什么而不是你想要的行为？
DEL BACKSPACE 和方向键呢？！

标签： javascript jquery regex keypress keyup

【解决方案1】：

这对我有用：

$(function(){
    $('#t').keypress(function(e){
        var txt = String.fromCharCode(e.which);
        console.log(txt + ' : ' + e.which);
        if(!txt.match(/[A-Za-z0-9+#.]/)) 
        {
            return false;
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="t" />

【讨论】：

可以将文本插入到剪贴板的输入中。 DEL 和 BACKSPACE 也不起作用。

【解决方案2】：

你不需要替换字符，只需要阻止它。

var char = String.fromCharCode(event.which)
if (!char.match(/^[^A-Za-z0-9+#\.\-]+$/)) event.preventDefault();

【讨论】：

这可以代替：if (!char.match(/[A-Za-z0-9+#\.\-]/)) event.preventDefault();

【解决方案3】：

谢谢大家。

实际上我的问题有点困难：过滤无效键并为有效键启动 ajax 调用，有两种不同的方式：如果用户按 SPACE/COMMA 或在他/她仍在键入时。代码如下：

$(document).ready(function(){

$('#post_tags').keypress(function(e){
    var txt = String.fromCharCode(e.which);
    console.log(txt + ' : ' + e.which);

    if(txt.match(/^[^A-Za-z0-9+#\-\.]+$/))
    {
          return false;
    }
})

$('#post_tags').keyup(function(event){
      code = event.which
      var token = String.fromCharCode(code)
      var txt = $(this).val()

              //create a new tag, take it out of textfield
      if (code == 32 || code == 188)
      {
        console.log("AJAX new word keyup")

          $.ajax({
            type: 'get',
            url: '/posts/tags_change',
            dataType: "json",
            data: "query=" + $(this).val(),

            success: function(data) {
            console.log(data)
            $('#post_tags').val('')
            },

            error: function(data) {
                alert("Ajax error")
            }
          });
    }
    else
    {
                    //do autocomplete ajax
        console.log("typing:" + txt)
    }

});

})

不知道这是否 100% 正确！

【讨论】：

【解决方案4】：

替代解决方案

使用.which 字段可能会有所帮助。然后在它不适合时简单地返回 false 。实际上，我有一个huge object，其中包含所有主要浏览器的 .which 信息。它包括你可以借用的数组来创建类似的东西：

var alphaNumericNcontrols = [ 8,9,13,16,17,18,19,20,32,33,34,35,36,37,38,39,40,44,45,46,145,48,49,50,51,52,53,54,55,56,57,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,96,97,98,99,100,101,102,103,104,105 ],
    illegal = {
        reg: [ 106,111,191,220 ],
        shift: [ 56,59,188,190,191,220,222 ]
    }

$(document).on("keydown", "input[type=text]", function(e) {
    var eKey = e.which || e.keyCode;
    if (alphaNumericNcontrols.indexOf(eKey) === -1) return false;
    if (illegal.reg.indexOf(eKey) > -1) return false;
    if (e.shiftKey && illegal.shift.indexOf(eKey) > -1) return false;
});

See Working Example Here

请记住，我的对象并不完美，我可能需要对其进行一些更新，但我已尽我所能从每个可能的主流浏览器中建立一切！

【讨论】：

我真的很喜欢这个解决方案，它非常适合我的需要。你知道我可以如何阻止某人添加表情符号吗？现在它仍然让我这样做。

【解决方案5】：

/[^A-Za-z0-9+#-\.]/

这会否定任何一个字符的匹配。要使其匹配多个字符，您必须在其中使用+：

/[^A-Za-z0-9+#-\.]+/
                  ^

现在要匹配整个字符串，您需要添加锚点：

/^[^A-Za-z0-9+#-\.]+$/
 ^                  ^

编辑：好的，这里的- 似乎也在创建从字符# 到. 的范围。在这种情况下，您可以将其转义，也可以将其放在末尾：

/^[^A-Za-z0-9+#\-\.]+$/

/^[^A-Za-z0-9+#\.-]+$/

【讨论】：

如果你在处理程序中返回 false 它将阻止值被更新
@Fernando 在这种情况下使用锚点，^ 表示字符串的开头，$ 表示字符串的结尾。这可以确保整个字符串匹配（或不匹配）模式。
@Fernando 我没有注意到- 角色在这里很顽皮；）请参阅我的答案的编辑。
@Fernando 另外，你为什么不使用if (txt.match(/^[A-Za-z0-9+#\.-]+$/)) 而不是使用双重否定？