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

【问题标题】：How to force input to only allow Alpha Letters?如何强制输入只允许字母？
【发布时间】：2013-10-22 02:49:16
【问题描述】：

此处使用 jQuery，但无法阻止将数字输入到输入字段中

输入

<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 键码。你知道我做错了什么吗？

【问题讨论】：

限制输入对用户不友好，您只关心使用它时的值是什么（比如提交表单时）。让用户随心所欲地获得合适的值，尤其是当他们不需要使用键盘在输入中输入值时。
如果键码不在A-Za-z范围内，如何在事件对象上调用preventDefault
e.preventDefault 阻止我输入任何字符 :( @RobG 但是我的输入中不允许输入数字
响应按键并停止除字母以外的任何内容不会停止复制/粘贴（通过至少 3 种方法中的任何一种）、拖放甚至脚本以插入用户想要的任何值。
哦，很高兴知道谢谢 :) 我不相信我的目标用户会使用拖放或脚本，但是嗯复制粘贴...

标签： javascript jquery input input-field

【解决方案1】：

短 ONELINER：

&lt;input onkeydown="return /[a-z]/i.test(event.key)" &gt;

对于所有unicode letters，试试这个regexp：/\p{L}/u (but ... this) - 这里是working example :)

【讨论】：

此处允许粘贴数值
onKeyPress 已折旧。相反，也许使用beforeinput?
@JeffB 感谢您提供信息 - 我将其更改为未弃用的 onkeydown

【解决方案2】：

event.key 属性给了我一个未定义的值。相反，我使用了event.keyCode：

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

请注意，8 是退格键的值。

【讨论】：

非常感谢！我也在这里找到了答案：stackoverflow.com/questions/13119124/… 但试图找出delete 键：D
这不允许空间。如何为该代码留出空间？
允许空间：function alphaOnly(event) { var key = event.keyCode; return ((key >= 65 && key

【解决方案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>

【讨论】：

你好兄弟，你能提供一个像这个盒子一样的数字代码吗？
为了修改允许的输入，只需根据自己的喜好修改正则表达式。例如，表示正整数的正则表达式可以表示为 /[0-9]+/。但是，当您说数字时，也许您有更具体的想法？

【解决方案4】：

在较新的浏览器上，您可以使用：

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

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

【讨论】：

你可以为此添加一个 jsfiddle 吗？我似乎无法让它工作
^ 我的错误。我看到它在与提交按钮结合使用时会响应，但不会根据w3schools.com/tags/att_input_pattern.asp 实时阻止密钥输入
请注意，如果您只输入一个字母，这将起作用。因此，如果您想要任意数量的字母，请添加 +（参见下面的示例）pattern="[A-Za-z]+"

【解决方案5】：

只有漂亮的单行 HTML：

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

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

许多其他使用 keypress 的解决方案无法在移动设备上运行，您需要使用 input。

html

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

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

如果你的表单是基于 PHP 的，它会在你的 "

    'onkeypress' => 'return /[a-z 0-9]/i.test(event.key)',

【讨论】：

【解决方案10】：

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

【讨论】：

【解决方案11】：

您可以订阅“InputEvent”，然后获取“数据”道具。例如

input.addEventListener('beforeinput', (event) => {
    const data = event.data;

    // if "data" is present - user enter some character
    // if "data" is NOT present - user tap non character key (e.g. delete, shift and other)
    if(data) {
        // check if data is not number
        const isAllow = /\D/.test(data);

        if(!isAllow) {
            e.preventDefault();
        }
    }
})

更多信息

event.data - https://developer.mozilla.org/en-US/docs/Web/API/InputEvent/data
输入前事件 - https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event

【讨论】：

【解决方案12】：

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

    


    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)。如果您不需要它，您可以删除此条件。

【讨论】：