Как принудительно вводить ввод только для букв альфа-букв?

используя 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. Вы видите, что я делаю неправильно?

Ответы

Ответ 1

Свойство event.key дало мне значение undefined. Вместо этого я использовал event.keyCode:

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

Обратите внимание, что значение 8 для ключа backspace.

Ответ 2

Вместо того, чтобы полагаться на коды клавиш, которые могут быть довольно громоздкими, вместо этого вы можете использовать регулярные выражения. Изменяя шаблон, мы можем легко ограничить ввод в соответствии с нашими потребностями. Обратите внимание, что это работает с событием keypress и позволит использовать backspace (как в принятом ответе). Это не помешает пользователям вставлять "незаконные" символы.

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>

Ответ 3

Короткий ONELINER:

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

Ответ 4

В новых браузерах вы можете использовать:

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

Вы можете использовать регулярные выражения для ограничения полей ввода.

Ответ 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

Многие другие решения, использующие нажатие клавиш, не будут работать на мобильных устройствах, вам нужно использовать ввод.

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