【问题标题】：Allow text box only for letters using jQuery?只允许使用 jQuery 的字母的文本框？
【发布时间】：2010-06-05 10:52:34
【问题描述】：

我想使用 jQuery 制作一个只允许字母 (a-z) 的文本框。有什么例子吗？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

<input name="lorem" onkeyup="this.value=this.value.replace(/[^a-z]/g,'');">

对于喜欢粘贴而不是打字的邪恶用户，可以与onblur 相同；）

[+] 漂亮的 jQuery 代码：

<input name="lorem" class="alphaonly">
<script type="text/javascript">
$('.alphaonly').bind('keyup blur',function(){ 
    var node = $(this);
    node.val(node.val().replace(/[^a-z]/g,'') ); }
);
</script>

【讨论】：

您不应该使用 HTML 属性来附加事件，尤其是当像 jQuery 这样简单的东西可以正确附加事件处理程序时。
现在我用的是你的。那天我犯了一个错误。但现在我解决了。它对我来说很好用。
简单的解决方案，效果很好，谢谢。如果有人想添加空间，请使用：/[^a-zA-Z]/g
这在 Android 中不起作用。如果您输入一个字母，然后输入两个非字母，则会删除该字母。
@rybo111 很可能您输入的第一个字符大写，我的解决方案只允许小写。

【解决方案2】：

接受的答案

接受的答案可能很短，但存在严重缺陷 (see this fiddle)：

无论按什么键，光标都会移动到末尾。
非字母会暂时显示，然后消失。
在 Chrome for Android 上存在问题（请参阅我的评论）。

更好的方法

以下创建一个键码数组（白名单）。如果按下的键不在数组中，则忽略输入（see this fiddle）：

$(".alpha-only").on("keydown", function(event){
  // Allow controls such as backspace, tab etc.
  var arr = [8,9,16,17,20,35,36,37,38,39,40,45,46];

  // Allow letters
  for(var i = 65; i <= 90; i++){
    arr.push(i);
  }

  // Prevent default if not in array
  if(jQuery.inArray(event.which, arr) === -1){
    event.preventDefault();
  }
});

请注意，这允许大写和小写字母。

我已经包含了键码，例如退格键、删除键和箭头键。您可以从this list of key codes 创建自己的白名单数组以满足您的需求。

仅在粘贴时修改

当然，用户还是可以粘贴非字母的（比如通过CTRL+V或者右键），所以我们还是需要用.on("input"... 但replace() 仅在必要时：

$(".alpha-only").on("input", function(){
  var regexp = /[^a-zA-Z]/g;
  if($(this).val().match(regexp)){
    $(this).val( $(this).val().replace(regexp,'') );
  }
});

这意味着我们仍然有光标跳到末尾的不良影响，但只有当用户粘贴非字母时。

避免自动更正

某些触摸屏键盘会尽其所能在用户认为必要的地方自动更正用户。令人惊讶的是，这甚至可能包括 autocomplete 和 autocorrect 甚至 spellcheck 关闭的输入。

为了解决这个问题，我建议使用type="url"，因为 URL 可以接受大小写字母，但不会自动更正。然后，要绕过尝试验证 URL 的浏览器，您必须在 form 标记中使用 novalidate。

【讨论】：

感谢您的意见。如何允许空格键？我包括 32，但它不允许我。是因为type="url"吗？
@user979431 因为 URL 可以有空格（它们通常会被浏览器转换为 %20），那么您需要做的就是在正则表达式中的 Z 之后添加一个空格
这样更好。谢谢
这两种方法一起使用比公认的答案要好得多！
@Frithjof 随意编辑答案。添加“、制表符等”如果更改太小，则移至其上方的行。

【解决方案3】：

要只允许小写字母，如果键码不在“a”..“z”范围内，请在事件对象上调用preventDefault。如果应该允许大写，请检查 65..90 或 'A'..'Z'。

或者，也可以使用众多input mask plugins 之一。

见example。

$(<selector>).keypress(function(e) {
    if(e.which < 97 /* a */ || e.which > 122 /* z */) {
        e.preventDefault();
    }
});

【讨论】：

可是删不掉？能删吗？
不错，但仍需要一些调整以防止右键单击后粘贴

【解决方案4】：

下面演示了只允许使用 Jquery 的字母 [a-z]：

  $(function() {
    $('#txtFirstName').keydown(function(e) {
      if (e.shiftKey || e.ctrlKey || e.altKey) {
        e.preventDefault();
      } else {
        var key = e.keyCode;
        if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90))) {
          e.preventDefault();
        }
      }
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input id="txtFirstName" value="">

【讨论】：

【解决方案5】：

// allow only  Alphabets A-Z a-z _ and space
$('.alphaonly').bind('keyup blur',function(){ 
    var node = $(this);
    node.val(node.val().replace(/[^A-Za-z_\s]/,'') ); }   // (/[^a-z]/g,''
);
// allow only  Number 0 to 9
$('.numberonly').bind('keyup blur',function(){ 
    var node = $(this);
    node.val(node.val().replace(/[^0-9]/,'') ); }   // (/[^a-z]/g,''
);

【讨论】：

【解决方案6】：

  $("#test").keypress(function(event){
        var inputValue = event.charCode;
        //alert(inputValue);
        if(!((inputValue > 64 && inputValue < 91) || (inputValue > 96 && inputValue < 123)||(inputValue==32) || (inputValue==0))){
            event.preventDefault();
        }
    });
  $("#test1").keypress(function(event){
        var inputValue = event.charCode;
        //alert(inputValue);
        if(!((inputValue > 47 && inputValue < 58) ||(inputValue==32) || (inputValue==0))){
            event.preventDefault();
        }
    });

  $("#test3").keypress(function(event){
        var inputValue = event.charCode;
        //alert(inputValue);
        if(!((inputValue > 64 && inputValue < 91) || (inputValue > 96 && inputValue < 123)||(inputValue==32)||(inputValue > 47 && inputValue < 58) ||(inputValue==32) || (inputValue==0))){
            event.preventDefault();
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
For letters:<input type="text" id="test">   <br>
<br>
For Numbers: <input type="text" id="test1">
<br>
<br>
For Alphanumeric: <input type="text" id="test3">

【讨论】：

【解决方案7】：

感谢第一个答案..做了这个..

<input name="lorem" class="alpha-only">

<script type="text/javascript">
   $(function() 
   {
        $('.alpha-only').bind('keyup input',function()
        {       
            if (this.value.match(/[^a-zA-Z áéíóúÁÉÍÓÚüÜ]/g)) 
            {
                this.value = this.value.replace(/[^a-zA-Z áéíóúÁÉÍÓÚüÜ]/g, '');
            }
        });
    });
</script>

这有一些改进，例如带有重音符号的字母，并且将“模糊”更改为“输入”可以纠正暂时显示的非字母，当您使用鼠标选择文本并拖动时也可以纠正..

【讨论】：

【解决方案8】：

JQuery 函数只允许小写和大写字母：

文本字段：

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

JQuery 函数：

$('#a').keydown(function (e) {
    if (e.ctrlKey || e.altKey) {
           e.preventDefault();
    } else {
           var key = e.keyCode;
           if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90))) {
                e.preventDefault();
           }
    }
});

【讨论】：

【解决方案9】：

@dev-null-dweller 描述的解决方案绝对有效。

但是，从jQuery 3.0 开始，.bind() 方法已被弃用。自 jQuery 1.7 以来，它已被用于将事件处理程序附加到文档的 .on() 方法取代，因此已不鼓励使用它。

在此处查看 jQuery 3.0 的已弃用方法列表：http://api.jquery.com/category/deprecated/deprecated-3.0/

所以解决方案是使用.on()方法而不是.bind()。

如果您需要绑定现有元素，则代码为：

$('.alphaonly').on('keyup blur', function(){
    var node = $(this);
    node.val( node.val().replace(/[^a-z]/g,'') ); 
});

如果您需要绑定到动态元素，代码将是：

$(document).on('keyup blur', '.alphaonly', function(){
    var node = $(this);
    node.val(node.val().replace(/[^a-z]/g,'') );
});

您需要将事件绑定到文档或文档加载中已经存在的其他一些元素。

希望这对新版本的 jQuery 有所帮助。

【讨论】：

【解决方案10】：

支持退格：

new RegExp("^[a-zA-Z \b]*$");

此选项不会检查移动设备。所以你可以使用jQuery Mask Plugin 并使用以下代码：

jQuery('.alpha-field, input[name=fname]').mask('Z',{translation:  {'Z': {pattern: /[a-zA-Z ]/, recursive: true}}});

【讨论】：

【解决方案11】：

$("#txtName").keypress(function (e) {

    var key = e.keyCode;
    if ((key >= 48 && key <= 57) || (key >= 33 && key <= 47) || (key >= 58 && key <= 64) || (key >= 91 && key <= 96) || (key >= 123 && key <= 127)) {
        e.preventDefault();
    }
    var text = $(this).val();
    $(this).val(text.replace("  ", " "));

});

【讨论】：

【解决方案12】：

if (!isValidName(name)) {           
   //return fail message
} else {
   //return success message
}

function isValidName(name) {
   var regex = new RegExp("^[a-zA-Z ]+$");
   if (regex.test(name)) {
     return true;  
   } else {
     return false; 
   }
}

【讨论】：