Как заставить ввод только разрешить буквы альфа?

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

}

Я видел множество примеров того, как ограничить только числа, и я использую правильные коды клавиш для аз и аз. Вы видите, что я делаю не так?

36

javascript jquery input input-field

Источник

user168738 22 окт '13 в 02:49

12 ответов

Решение

Короткий ONELINER:

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

Для всех букв Юникода попробуйте это регулярное выражение: /\p{L}/u ( но... это) - и вот рабочий пример:)

94

Источник

user860099 06 сен '18 в 11:48

Вместо того, чтобы полагаться на коды клавиш, которые могут быть довольно громоздкими, вы можете вместо этого использовать регулярные выражения. Изменяя шаблон, мы можем легко ограничить входные данные в соответствии с нашими потребностями. Обратите внимание, что это работает с 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>

12

Источник

user2707592 03 авг '16 в 08:42

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

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

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

9

Источник

user507136 26 май '16 в 04:12

Хороший однострочный HTML только:

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

7

Источник

user4893747 31 янв '18 в 06:08

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

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
}

4

Источник

user345426 30 авг '19 в 04:29

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

4

Источник

user1887378 06 апр '16 в 12:17

события keypress , keyup и keydown не работают на мобильных устройствах. А также KeyboardEvent.keyCodeбольше не рекомендуется. Итак, я нашел новый способ с input событие и RegExp. Он отлично работает со всеми типами устройств.

2

Источник

02 июл '21 в 15:46

Вы можете сделать что-то подобное, предполагая, что у вас есть более одного входа:

Это позволяет использовать пробел и возврат -> (charCode == 8 || charCode == 32). Если вам это не нужно, вы можете удалить это условие.

2

Источник

user12739614 22 мар '22 в 11:50

Вы можете подписаться на «InputEvent», а затем получить опору «data». Например

      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

0

Источник

user10658709 13 авг '21 в 17:38

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

0

Источник

user7784984 15 ноя '17 в 10:12

Если ваша форма основана на PHP, она будет работать таким образом в вашем коде "

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

-1

Источник

user12491036 31 авг '20 в 14:38

Другие вопросы по тегам javascript jquery input input-field

user1380918 22 окт '13 в 03:03 2013-10-22 03:03 · Accepted Answer · 2013-10-22 03:03

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

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

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

23

Источник

user1380918 22 окт '13 в 03:03