如何强制输入只允许字母？

Question

在这里使用jQuery，但无法防止数字被输入到输入框中。

http://codepen.io/leongaban/pen/owbjg

输入

<input type="text" name="field" maxlength="8"
    title="Only Letters"
    value="Type Letters Only"
    onkeydown="return alphaOnly(event);"
    onblur="if (this.value == '') {this.value = 'Type Letters Only';}"
    onfocus="if (this.value == 'Type Letters Only') {this.value = '';}"/>

jQuery

function alphaOnly(event) {

  alert(event);

  var key;

  if (window.event) {
    key = window.event.key;
  } else if (e) {
    key = e.which;
  }
  //var key = window.event.key || event.key;
  alert(key.value);
  return ((key >= 65 && key <= 90) || (key >= 95 && key <= 122));

}

我在这里看到了很多关于如何限制只能输入数字的例子，而且我正在使用正确的键码来限制a-z和A-Z。你能看出我哪里做错了吗？

- Leon Gaban

---

限制输入并不友好，只有在使用时（例如提交表单时）才关心值是多少。让用户以任何他们想要的方式到达合适的值，特别是因为他们不需要使用键盘来输入值。 - RobG

如果键码不在A-Za-z范围内，尝试在事件对象上调用preventDefault方法如何？ - meghamind

e.preventDefault 阻止了我的输入，无法输入任何字符 :( @RobG 我的输入中不允许输入数字。 - Leon Gaban

响应按键并阻止除字母以外的任何内容都无法阻止复制/粘贴（通过至少3种方法之一），拖放甚至脚本插入用户想要的任何值。 - RobG

哦，好的，谢谢 :) 我不相信我所针对的用户会使用拖放或脚本，但是复制粘贴可能会用到... - Leon Gaban

Answer 1

简短的一句话描述:

<input onkeydown="return /[a-z]/i.test(event.key)" >

针对所有的Unicode字母，可以尝试使用这个正则表达式：/\p{L}/u（但是...这个）- 这里提供一个可行的示例 :)

- Kamil Kiełczewski

---

我该如何在此处允许输入中添加连字符（-）？ - code-is-life

@code-is-life 将[a-z]替换为[a-z\-]。 - Kamil Kiełczewski

不确定是否应该为此发布新问题，但仅针对数字，这将是<input onkeydown="return /[0-9]/i.test(event.key)">，对吗？ - code-is-life

我点赞了这个，但我认为你可以解释一下其中的含义。例如，在"/[a-z]/i"中，/i表示大小写敏感，而.test()则检查正则表达式——否则，人们只会不加理解地使用它。 - undefined

Answer 2

属性event.key返回了未定义的值，我使用了event.keyCode代替:

function alphaOnly(event) {
  var key = event.keyCode;
  return ((key >= 65 && key <= 90) || key == 8);
};

请注意，数字8代表退格键。

- hexacyanide

---

非常感谢！我刚刚在这里找到了答案：http://stackoverflow.com/questions/13119124/why-is-window-event-not-working，但是我还在尝试弄清楚“删除”键:D - Leon Gaban

这段编程代码不允许空格。如何在这些代码中允许空格？ - Jayrex

允许空格：function alphaOnly(event) { var key = event.keyCode; return ((key >= 65 && key <= 90) || key == 8 || key==32); } - Duc Manh Nguyen

Answer 3

不必依赖于键码，这可能非常麻烦，您可以使用正则表达式代替。通过更改模式，我们可以轻松地限制输入以适应我们的需要。请注意，这适用于keypress事件，并将允许使用退格键（如所接受的答案）。它不会防止用户粘贴“非法”字符。

function testInput(event) {
   var value = String.fromCharCode(event.which);
   var pattern = new RegExp(/[a-zåäö ]/i);
   return pattern.test(value);
}

$('#my-field').bind('keypress', testInput);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
   Test input:
   <input id="my-field" type="text">
</label>

- Robin Keskisarkka

---

你好，兄弟，你能提供一个类似这个文本框的仅数字的代码吗？ - Rohit Verma

为了修改允许的输入，只需根据您的喜好修改正则表达式即可。例如，表示正整数的正则表达式可以写成 /[0-9]+/。但是，当您说到数字时，也许您有更具体的要求？ - Robin Keskisarkka

Answer 4

在更新的浏览器中，您可以使用以下方法：

<input type="text" name="country_code" 
    pattern="[A-Za-z]" title="Three letter country code">

您可以使用正则表达式来限制输入字段。

- jsbisht

---

你能否添加一个 jsfiddle 来实现此功能？我似乎无法让它正常工作。 - Felipe

我的错误。我发现它在与提交按钮结合使用时会响应，但不会像 https://www.w3schools.com/tags/att_input_pattern.asp 中所述那样实时阻止键入。 - Felipe

请注意，此方法仅适用于输入一个字母的情况。如果您想输入更多的字母，请添加 + （参见下面的示例） 模式="[A-Za-z]+" - Nour Lababidi

Answer 5

不错的一行代码，只使用HTML实现：

 <input type="text" id='nameInput' onkeypress='return ((event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || (event.charCode == 32))'>

- Dustin Spengler

Answer 6

许多使用keypress的其他解决方案在移动设备上不起作用，您需要使用input。

<input type="text" id="name"  data-value="" autocomplete="off" spellcheck="true" placeholder="Type your name" autofocus />

jQuery

$('#name').on('input', function() {
    var cursor_pos = $(this).getCursorPosition()
    if(!(/^[a-zA-Z ']*$/.test($(this).val())) ) {
        $(this).val($(this).attr('data-value'))
        $(this).setCursorPosition(cursor_pos - 1)
        return
    }
    $(this).attr('data-value', $(this).val())
})

$.fn.getCursorPosition = function() {
    if(this.length == 0) return -1
    return $(this).getSelectionStart()
}
$.fn.setCursorPosition = function(position) {
    if(this.lengh == 0) return this
    return $(this).setSelection(position, position)
}
$.fn.getSelectionStart = function(){
  if(this.lengh == 0) return -1
  input = this[0]
  var pos = input.value.length
  if (input.createTextRange) {
    var r = document.selection.createRange().duplicate()
    r.moveEnd('character', input.value.length)
    if (r.text == '') 
    pos = input.value.length
    pos = input.value.lastIndexOf(r.text)
  } else if(typeof(input.selectionStart)!="undefined")
  pos = input.selectionStart
  return pos
}
$.fn.setSelection = function(selectionStart, selectionEnd) {
  if(this.lengh == 0) return this
  input = this[0]
  if(input.createTextRange) {
    var range = input.createTextRange()
    range.collapse(true)
    range.moveEnd('character', selectionEnd)
    range.moveStart('character', selectionStart)
    range.select()
  }
  else if (input.setSelectionRange) {
    input.focus()
    input.setSelectionRange(selectionStart, selectionEnd)
  }
  return this
}

- buycanna.io

Answer 7

<input type="text" name="field" maxlength="8"
    onkeypress="return onlyAlphabets(event,this);" />

function onlyAlphabets(e, t) {
            try {
                if (window.event) {
                    var charCode = window.event.keyCode;
                }
                else if (e) {
                    var charCode = e.which;
                }
                else { return true; }
                if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
                    return true;
                else
                    return false;
            }
            catch (err) {
                alert(err.Description);
            }
        }

- Pankaj Upadhyay

Answer 8

假设您有多个输入，您可以像这样做：

假设您有多个输入，您可以尝试以下操作：

    


    function alphaOnly() {
    let nameInput = document.querySelectorAll('.js-name');
      nameInput.forEach((input) => {
  
        input.addEventListener('keydown', (e) => {
          let charCode = e.keyCode;
  
          if ((charCode >= 65 && charCode <= 90) || charCode == 8 || charCode == 32) {
            null;
          } else {
            e.preventDefault();
          }
        });
      });
    }

alphaOnly();

First name: <input type="text" class="js-name" name="fname"><br>
Last name: <input type="text" class="js-name" name="lname"><br>

这允许您使用空格和退格键 -> (charCode == 8 || charCode == 32)。如果不需要，可以删除此条件。

- Eliftch

Answer 9

keypress、keyup 和 keydown 事件在移动设备上不起作用。而且，KeyboardEvent.keyCode 已不再推荐使用。因此，我找到了一种新的方法，使用 input 事件和 RegExp。它适用于所有类型的设备。

const alphaOnlyInput = document.getElementById('alpha-only-input'),
  alphaOnlyPattern = new RegExp('^[a-zA-Z ]+$')

let previousValue = ''

alphaOnlyInput.addEventListener('input', (e) => {
  let currentValue = alphaOnlyInput.value

  if (e.inputType.includes('delete') || alphaOnlyPattern.test(currentValue)) {
    previousValue = currentValue
  }

  alphaOnlyInput.value = previousValue
})

<label>Alpha Only: </label>
<input type="text" id="alpha-only-input" name="alphaOnly">

- Niranjan Hegde

Answer 10

<input type="text" name="name" id="event" onkeydown="return alphaOnly(event);"   required />


function alphaOnly(event) {
  var key = event.keyCode;`enter code here`
  return ((key >= 65 && key <= 90) || key == 8);
};

- gopinath