如何使用jquery阻止或限制输入字段中的特殊字符？

Question

如何使用jquery阻止特殊字符输入到输入字段？

Answer 1

一个使用正则表达式的简单示例,您可以将其更改为允许/禁止您喜欢的任何内容.

$('input').on('keypress', function (event) {
    var regex = new RegExp("^[a-zA-Z0-9]+$");
    var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
    if (!regex.test(key)) {
       event.preventDefault();
       return false;
    }
});

Answer 2

我一直在寻找一个限制输入仅限于字母数字字符的答案,但仍然允许使用控制字符(例如,退格键,删除键,制表符)和复制+粘贴.我尝试的答案都没有满足所有这些要求,所以我想出了以下使用该input事件.

$('input').on('input', function() {
  $(this).val($(this).val().replace(/[^a-z0-9]/gi, ''));
});

编辑:
正如rinogo在评论中指出的那样,上面的代码片段在输入文本的中间键入时强制光标到输入的末尾.我相信下面的代码片段可以解决这个问题.

$('input').on('input', function() {
  var c = this.selectionStart,
      r = /[^a-z0-9]/gi,
      v = $(this).val();
  if(r.test(v)) {
    $(this).val(v.replace(r, ''));
    c--;
  }
  this.setSelectionRange(c, c);
});

Answer 3

简短回答:阻止'按键'事件:

$("input").keypress(function(e){
    var charCode = !e.charCode ? e.which : e.charCode;

    if(/* Test for special character */ )
        e.preventDefault();
})

答案很长:使用像jquery.alphanum这样的插件

选择解决方案时需要考虑以下几点:

• 粘贴文字
• 上述代码可以防止像退格或F5这样的控制字符.
• é,í,ä等
• 阿拉伯语或中文......
• 跨浏览器兼容性

我认为这个领域足够复杂,可以保证使用第三方插件.我尝试了几个可用的插件,但发现每个插件都有一些问题所以我继续写了jquery.alphanum.代码如下所示:

$("input").alphanum();

或者对于更精细的控制,添加一些设置:

$("#username").alphanum({
    allow      : "€$£",
    disallow   : "xyz",
    allowUpper : false
});

希望能帮助到你.

Answer 4

使用HTML5的模式输入属性!

<input type="text" pattern="^[a-zA-Z0-9]+$" />

Answer 5

看看jQuery字母数字插件.https://github.com/KevinSheedy/jquery.alphanum

//All of these are from their demo page
//only numbers and alpha characters
$('.sample1').alphanumeric();
//only numeric
$('.sample4').numeric();
//only numeric and the .
$('.sample5').numeric({allow:"."});
//all alphanumeric except the . 1 and a
$('.sample6').alphanumeric({ichars:'.1a'});

Answer 6

使用正则表达式允许/禁止任何内容.此外,对于比接受的答案稍强一些的版本,允许没有与其关联的键值的字符(退格键,制表符,箭头键,删除等)可以通过首先通过按键事件来完成,根据键码而不是值来检查键.

$('#input').bind('keydown', function (event) {
        switch (event.keyCode) {
            case 8:  // Backspace
            case 9:  // Tab
            case 13: // Enter
            case 37: // Left
            case 38: // Up
            case 39: // Right
            case 40: // Down
            break;
            default:
            var regex = new RegExp("^[a-zA-Z0-9.,/ $@()]+$");
            var key = event.key;
            if (!regex.test(key)) {
                event.preventDefault();
                return false;
            }
            break;
        }
});

Answer 7

你的文本框:

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

你的javascript:

$("#name").keypress(function(event) {
    var character = String.fromCharCode(event.keyCode);
    return isValid(character);     
});

function isValid(str) {
    return !/[~`!@#$%\^&*()+=\-\[\]\\';,/{}|\\":<>\?]/g.test(str);
}

Answer 8

内联使用简单的 onkeypress 事件。

 <input type="text" name="count"  onkeypress="return /[0-9a-zA-Z]/i.test(event.key)">

Answer 9

这是一个阻止用户输入字符“a”的示例

$(function() {
$('input:text').keydown(function(e) {
if(e.keyCode==65)
    return false;

});
});

关键代码参考：
http://www.expandinghead.net/keycode.html

Answer 10

我使用这段代码修改我看到的其他代码。仅当按下的按键或粘贴的文本通过模式测试（匹配）时，才对用户写入（此示例是仅允许 8 位数字的文本输入）

$("input").on("keypress paste", function(e){
    var c = this.selectionStart, v = $(this).val();
    if (e.type == "keypress")
        var key = String.fromCharCode(!e.charCode ? e.which : e.charCode)
    else
        var key = e.originalEvent.clipboardData.getData('Text')
    var val = v.substr(0, c) + key + v.substr(c, v.length)
    if (!val.match(/\d{0,8}/) || val.match(/\d{0,8}/).toString() != val) {
        e.preventDefault()
        return false
    }
})

Answer 11

$(function(){
      $('input').keyup(function(){
        var input_val = $(this).val();
        var inputRGEX = /^[a-zA-Z0-9]*$/;
        var inputResult = inputRGEX.test(input_val);
          if(!(inputResult))
          {     
            this.value = this.value.replace(/[^a-z0-9\s]/gi, '');
          }
       });
    });