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

Question

在此处使用 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));

}

我在这里看到了很多关于如何限制为仅数字的示例，并且我为 az 和 AZ 使用了正确的键码。你看到我做错了吗？

score 63 · Accepted Answer

短 ONELINER :

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

对于所有unicode 字母，请尝试此regexp :(但是... this ) - 这是工作示例:)/\p{L}/u

score 21 · Accepted Answer

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

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

请注意，值 8 用于退格键。

score 10 · Accepted Answer

您可以使用正则表达式，而不是依赖可能非常麻烦的关键代码。通过改变模式，我们可以轻松地限制输入以满足我们的需求。请注意，这适用于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>

score 6 · Accepted Answer

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

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

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

score 6 · Accepted Answer

漂亮的单行 HTML：

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

score 4 · Accepted Answer

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

score 3 · Accepted Answer

许多其他使用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
}

score 0 · Accepted Answer

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

score 0 · Accepted Answer

如果您的表单是基于 PHP 的，它将在您的 " <?php $data = array(" 代码中以这种方式工作：

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

score 0 · Accepted Answer

keypress、keyup和keydown事件在移动设备中不起作用。并且KeyboardEvent.keyCode不再推荐。所以我找到了一种新的方式来使用inputevent 和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">

score 0 · Accepted Answer

您可以订阅“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
beforeinput 事件 - https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event

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

11 回答 11

Related

Reference