使用jQuery如何只允许文本框输入字母？

Question

我想使用jQuery实现只允许输入字母(a-z)的文本框。有什么示例吗？

- svk

Answer 1

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

对于那些喜欢复制粘贴而非手动输入的恶意用户，onfocus 和 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>

- dev-null-dweller

---

你不应该使用HTML属性来附加事件，特别是当有像jQuery这样的工具可以正确地附加事件处理程序时。 - Justin Johnson

简单易行的解决方案，效果很好，谢谢。 如果有人想要添加空格，请使用：/[^a-zA-Z ]/g。 - Wolf87

@dev-null-dweller 要允许大写字母，您可以将 [^a-z] 替换为 [^a-zA-Z]。 - Wessam El Mahdy

我发现将“input”添加到绑定的第一个参数中作为“keyup blur input”很有用，这可以防止在替换之前屏幕上出现错误字符。 - Wessam El Mahdy

我在我的项目中缩短并使用了相同的代码，如下：jQuery('#txtfirstname').keyup(function(){
jQuery(this).val(jQuery(this).val().replace(/[^a-z]/g,'') ); } ); - Mahder

Answer 2

已接受的答案

已接受的答案可能很短，但有一些缺点（请参见此fiddle）：

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

替代方案

以下创建了一个允许的键码数组。如果按下的键不在数组中，则忽略输入（请参见此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();
  }
});

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

我已经包含了诸如退格、删除和箭头键等关键代码。您可以使用此密钥代码列表作为参考来创建自己的数组。

仅在粘贴时进行修改

当然，用户仍然可以粘贴非字母字符（例如通过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,'') );
  }
});

这意味着当用户粘贴非字母字符时，我们仍然会出现光标跳到末尾的不良效果。

避免自动更正

某些触摸屏键盘会尽其所能在必要时自动更正用户的输入。令人惊讶的是，这甚至可能包括关闭了“自动完成”、“自动更正”和甚至“拼写检查”的输入。

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

- rybo111

---

@user979431 因为URL可能包含空格（通常由浏览器转换为%20），所以您只需要在正则表达式中的Z后添加一个空格即可。 - rybo111

这要好得多。谢谢。 - Kiko

这两种方法一起使用比被接受的答案好得多！ - Abela

@Frithjof 随意编辑答案。如果更改太小，请在上面添加“，制表符等”。 - rybo111

添加空格的代码（由rybo111提供）：var regexp = /[^a-z A-Z ]/g; - Exel Gamboa

Answer 3

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

或者，您可以使用众多输入掩码插件中的任何一个。

请参见示例。

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

- Anurag

---

但是我无法删除它？是否有可能删除？ - svk

好的，但仍需进行微调以防止右键粘贴。 - dev-null-dweller

Answer 4

// 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,''
);

- Vijay Lathiya

Answer 5

使用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="">

- Anjan Kant

Answer 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">

- dn_pdih

Answer 7

@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的新版本有所帮助。

- Saurin Dashadia

Answer 8

感谢第一个回答..做到了这个..

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

这个版本有一些改进，比如支持带重音的字母，将“模糊”改为“输入”可以纠正短暂显示非字母字符的问题，同时也修复了使用鼠标选择文本时出现的拖动问题。

- Henry Gabriel González Montejo

Answer 9

支持退格键：

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}}});

- Rijo

Answer 10

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();
           }
    }
});

- Sachin Parse