Подтвердить что ты не робот

Разрешить текстовое поле только для букв с помощью jQuery?

Я хочу, чтобы текстовое поле позволяло использовать только буквы (a-z) с помощью jQuery. Любые примеры?

4b9b3361

ОТВЕТЫ

Ответ 1

<input name="lorem" onkeyup="this.value=this.value.replace(/[^a-z]/g,'');">

И может быть одинаковым для onblur для злого пользователя, которому нравится вставлять вместо ввода;)

[+] Довольно код jQuery:

<input name="lorem" class="alphaonly">
<script type="text/javascript">
$('.alphaonly').bind('keyup blur',function(){ 
    var node = $(this);
    node.val(node.val().replace(/[^a-z]/g,'') ); }
);
</script>

Ответ 2

Принятый ответ

Принятый ответ может быть коротким, но он серьезно испорчен (см. эту скрипту):

  • Курсор перемещается в конец, независимо от того, какая клавиша нажата.
  • Небраски отображаются мгновенно, а затем исчезают.
  • Это проблема в Chrome для Android (см. мой комментарий).

Лучший способ

Далее создается массив кодов клавиш (белый список). Если нажатая клавиша не находится в массиве, тогда вход игнорируется (см. Эту скрипту):

$(".alpha-only").on("keydown", function(event){
  // Allow controls such as backspace, tab etc.
  var arr = [8,9,16,17,20,35,36,37,38,39,40,45,46];

  // Allow letters
  for(var i = 65; i <= 90; i++){
    arr.push(i);
  }

  // Prevent default if not in array
  if(jQuery.inArray(event.which, arr) === -1){
    event.preventDefault();
  }
});

Обратите внимание, что это позволяет писать прописные и строчные буквы.

Я включил такие ключевые коды, как backspace, delete и keys. Вы можете создать свой собственный белый список из этот список кодов клавиш в соответствии с вашими потребностями.

Изменить только вставить

Конечно, пользователь все равно может вставлять не-буквы (например, через CTRL + V или щелкнуть правой кнопкой мыши), поэтому нам все равно нужно отслеживать все изменения с помощью .on("input"..., но replace() только там, где это необходимо

$(".alpha-only").on("input", function(){
  var regexp = /[^a-zA-Z]/g;
  if($(this).val().match(regexp)){
    $(this).val( $(this).val().replace(regexp,'') );
  }
});

Это означает, что мы все еще имеем нежелательный эффект перехода курсора в конец, но только тогда, когда пользователь вставляет не-буквы.

Избегание автокоррекции

Некоторые сенсорные клавиатуры будут делать все возможное, чтобы автокорректировать пользователя, где он сочтет это необходимым. Удивительно, но это даже может включать в себя входы, где autocomplete и autocorrect и даже spellcheck выключены.

Чтобы обойти это, я бы рекомендовал использовать type="url", поскольку URL-адреса могут принимать буквы верхнего и нижнего регистра, но не будут автоматически исправлены. Затем, чтобы обойти браузер, пытающийся проверить URL-адрес, вы должны использовать novalidate в тэге form.

Ответ 3

Чтобы разрешить только строчные алфавиты, вызовите preventDefault объекта события, если key code не находится в диапазоне 'a'.. 'z'. Проверьте между 65..90 или "A".. "Z", если верхний регистр должен быть разрешен.

Или, альтернативно, используйте один из многочисленных плагинов входных масок там.

См. пример.

​$(<selector>).keypress(function(e) {
    if(e.which < 97 /* a */ || e.which > 122 /* z */) {
        e.preventDefault();
    }
});​​​​​

Ответ 4

Демонстрируется ниже, чтобы использовать только буквы [a-z] с помощью JQuery:

  $(function() {
    $('#txtFirstName').keydown(function(e) {
      if (e.shiftKey || e.ctrlKey || e.altKey) {
        e.preventDefault();
      } else {
        var key = e.keyCode;
        if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90))) {
          e.preventDefault();
        }
      }
    });
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input id="txtFirstName" value="">

Ответ 5

// allow only  Alphabets A-Z a-z _ and space
$('.alphaonly').bind('keyup blur',function(){ 
    var node = $(this);
    node.val(node.val().replace(/[^A-Za-z_\s]/,'') ); }   // (/[^a-z]/g,''
);
// allow only  Number 0 to 9
$('.numberonly').bind('keyup blur',function(){ 
    var node = $(this);
    node.val(node.val().replace(/[^0-9]/,'') ); }   // (/[^a-z]/g,''
);

Ответ 6

Благодаря первому ответу.. сделал это..

<input name="lorem" class="alpha-only">

<script type="text/javascript">
   $(function() 
   {
        $('.alpha-only').bind('keyup input',function()
        {       
            if (this.value.match(/[^a-zA-Z áéíóúÁÉÍÓÚüÜ]/g)) 
            {
                this.value = this.value.replace(/[^a-zA-Z áéíóúÁÉÍÓÚüÜ]/g, '');
            }
        });
    });
</script>

У этого есть некоторые улучшения, такие как буквы с акцентами, а изменение "размытия" для "ввода" корректирует ненакрашенные символы, отображаемые кратковременно, также при выборе текста мышью и перетаскивании.

Ответ 7

Функция JQuery, чтобы разрешить только небольшие и капитальные буквы:

Текстовое поле:

<input id="a" type="text" />

Функция JQuery:

$('#a').keydown(function (e) {
    if (e.ctrlKey || e.altKey) {
           e.preventDefault();
    } else {
           var key = e.keyCode;
           if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90))) {
                e.preventDefault();
           }
    }
});

Ответ 8

Решение, описанное @dev-null-dweller, работает абсолютно.

Однако метод As jQuery 3.0, .bind() устарел. Он был заменен методом .on() для привязки обработчиков событий к документу с jQuery 1.7, поэтому его использование было уже обескуражено.

Просмотрите список устаревших методов для jQuery 3.0 здесь: http://api.jquery.com/category/deprecated/deprecated-3.0/

Таким образом, решение заключается в использовании метода .on() вместо .bind().

Если вам нужно связать существующие элементы, тогда код будет выглядеть следующим образом:

$('.alphaonly').on('keyup blur', function(){
    var node = $(this);
    node.val( node.val().replace(/[^a-z]/g,'') ); 
});

Если вам нужно привязать к динамическим элементам, код будет:

$(document).on('keyup blur', '.alphaonly', function(){
    var node = $(this);
    node.val(node.val().replace(/[^a-z]/g,'') );
});

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

Надеюсь, что это полезно для новой версии jQuery.

Ответ 9

  $("#test").keypress(function(event){
        var inputValue = event.charCode;
        //alert(inputValue);
        if(!((inputValue > 64 && inputValue < 91) || (inputValue > 96 && inputValue < 123)||(inputValue==32) || (inputValue==0))){
            event.preventDefault();
        }
    });
  $("#test1").keypress(function(event){
        var inputValue = event.charCode;
        //alert(inputValue);
        if(!((inputValue > 47 && inputValue < 58) ||(inputValue==32) || (inputValue==0))){
            event.preventDefault();
        }
    });

  $("#test3").keypress(function(event){
        var inputValue = event.charCode;
        //alert(inputValue);
        if(!((inputValue > 64 && inputValue < 91) || (inputValue > 96 && inputValue < 123)||(inputValue==32)||(inputValue > 47 && inputValue < 58) ||(inputValue==32) || (inputValue==0))){
            event.preventDefault();
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
For letters:<input type="text" id="test">   <br>
<br>
For Numbers: <input type="text" id="test1">
<br>
<br>
For Alphanumeric: <input type="text" id="test3">

Ответ 10

Поддержка backspace:

new RegExp("^[a-zA-Z \b]*$");

Этот параметр не будет проверять мобильный. Таким образом, вы можете использовать jQuery Mask Plugin и использовать следующий код:

jQuery('.alpha-field, input[name=fname]').mask('Z',{translation:  {'Z': {pattern: /[a-zA-Z ]/, recursive: true}}});