Как я могу предотвратить ввод нецифровых чисел в текстовое поле?

Question

Я нашел этот вопрос . Однако большинство ответов перехватывают нажатие клавиши, проверяют код клавиши и останавливают событие, если оно не является допустимым кодом клавиши.

Есть некоторые проблемы с этим.

• Распространенная ошибка среди всех ответов заключается в том, что комбинации клавиш Shift не запрещены, поэтому пользователи могут вводить такие слова, как "@" или "&".

• Пользователи по-прежнему могут вставлять в буфер обмена неверные значения.

• Когда вы начинаете возиться с событием нажатия клавиши, веб-страница начинает делать странные, неожиданные вещи. Например, если поле имеет фокус и пользователь пытается перезагрузить страницу, нажав command-R, оно не будет работать. Или они не могут выйти за пределы поля.

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

Я ищу решение по этим направлениям:

• Не перехватывает событие нажатия клавиши.

• Идеально использовать регулярное выражение после нажатия клавиши.

• ОК, если он использует jQuery.

• Не требует установки плагина.

Я попробовал эту функцию:

  $('input.numerals_only').keypress(function() {
    var v = $(this).val();
    var no_nonnumerals = v.replace( /[^0-9]/, '' );
    $(this).val(no_nonnumerals);
  });

Но это не работает. Я все еще могу печатать буквы.

Есть информация о том, почему это не работает? Как я мог изменить это так, чтобы это работало? Другие предложения?

Answer 1

То, что отсутствует в вашем регулярном выражении, поэтому оно не работает и для нажатий клавиш, это флаг g для глобальной проверки регулярного выражения.

Использование var no_nonnumerals = v.replace( /[^0-9]/g, '' );

Answer 2

Если вы используете keyup, а также размытие, вы должны обрабатывать большинство случаев. Кто-то вводит текст, а также вставляет значение в текстовое поле. Так как функция размытия удалит и плохие значения.

$('input.numerals_only').keyup(AllowOnlyNumber).blur(AllowOnlyNumber);

function AllowOnlyNumber()
{
    var v = $(this).val();
    var no_nonnumerals = v.replace(/[^0-9]/g, '');
    $(this).val(no_nonnumerals); 
}

Конечно, если html5 - опция, которую вы всегда можете сделать:

<input type="number"/>

jsfiddle пример.

Answer 3

Если вы используете keyup вместо keypress, это всегда удалит неправильные символы.

Вы также можете использовать это, чтобы фактически заблокировать события:

$('input.numerals_only').keypress(function(event) {
    if(event.keyCode < 48 || event.keyCode > 57){
        return false;
    }
});

Answer 4

Я написал для этого плагин jQuery. Демо и код здесь http://brianjaeger.com/process.php

Он использует регулярное выражение для проверки того, что вы хотите.

Есть несколько проблем:

• это плагин (однако, вы можете высосать код и вставить его в свой другой JavaScript, если хотите. -Его проще использовать как плагин)
• К сожалению, нет способа ограничить вставляемую информацию напрямую (во всех браузерах). Моим решением было добавить проверку при изменении фокуса, а также при нажатии клавиш.

Answer 5

Используйте событие keyup.Он запускается после обработки ключа браузером:

$('#txtInput')
    .keyup(function(ev) {
        var newValue = this.value.replace(/[^0-9]/, '');
        $(this).val(newValue);
    });