Как разрешить только числовые (0-9) в поле ввода HTML, используя jQuery?

Question

Я создаю веб-страницу, где у меня есть поле ввода текста, в котором я хочу разрешить только числовые символы, такие как (0,1,2,3,4,5 ... 9) 0-9.

Как я могу сделать это с помощью jQuery?

Answer 1

Необходимо убедиться, что у вас работает цифровая клавиатура и клавиша табуляции

 // Allow only backspace and delete
            if (event.keyCode == 46 || event.keyCode == 8  || event.keyCode == 9) {
                // let it happen, don't do anything
            }
            else {
                // Ensure that it is a number and stop the keypress
                if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)) {

                }
                else {
                    event.preventDefault();
                }
            }

Answer 2

Обновленное решение для улучшения взаимодействия с пользователем, которое решает проблему копирования и вставки и заменяет устаревший атрибут keyCode:

HTML

<input type="tel">

JQuery

$('[type=tel]').on('change', function(e) {
  $(e.target).val($(e.target).val().replace(/[^\d]/g, ''))
})
$('[type=tel]').on('keypress', function(e) {
  keys = ['0','1','2','3','4','5','6','7','8','9']
  return keys.indexOf(event.key) > -1
})

подробности:

Прежде всего, типы ввода :

number показывает стрелки вверх / вниз, уменьшающие фактическое пространство ввода, я считаю их уродливыми и полезными, только если число представляет количество (такие вещи, как телефоны, коды городов, идентификаторы ... не нуждаются в них) tel обеспечивает аналогичные проверки числа без стрелок в браузере

Использование [номер / телефон] также помогает отображать цифровую клавиатуру на мобильных устройствах.

Для проверки JS мне понадобились 2 функции: одна для обычного пользовательского ввода (нажатие клавиши), а другая для исправления (изменения) копирования и вставки, другие комбинации дали бы мне ужасный пользовательский опыт.

Я использую более надежный KeyboardEvent.key вместо , который теперь устарел KeyboardEvent.charCode

И в зависимости от поддержки вашего браузера вы можете рассмотреть возможность использования Array.prototype.includes () вместо плохо названного Array.prototype.indexOf () (для истинных / ложных результатов )

Answer 3

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

$(this).on( 'keypress', function( e )
{
    // Ensure that it is a number and stop the keypress
    if (e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) {
        e.preventDefault();
    }
});  

Answer 4

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

Лучшая ссылка, которую я нашел в этой теме: http://www.west -wind.com / блог / сообщений / 2011 / Апрель / 22 / Ограничение-Input-в-HTML-Textboxes-к-Числовой-Values ​​

Я новичок в stackoverflow, поэтому не знаю, смогу ли я просто отредактировать лучшее решение в топ-посте.

Answer 5

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

Этот метод допускает только 0-9 как для клавиатуры, так и для цифровой клавиатуры, клавиши возврата, табуляции, стрелок влево и вправо (обычные операции с формой)

$(".numbersonly-format").keydown(function (event) {
    // Prevent shift key since its not needed
    if (event.shiftKey == true) {
        event.preventDefault();
    }
    // Allow Only: keyboard 0-9, numpad 0-9, backspace, tab, left arrow, right arrow, delete
    if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 46) {
        // Allow normal operation
    } else {
        // Prevent the rest
        event.preventDefault();
    }
});

Answer 6

Чтобы уточнить ответ № 3, я бы сделал следующее (ПРИМЕЧАНИЕ: по-прежнему не поддерживает вставку опций через клавиатуру или мышь):

$('#txtNumeric').keypress(
            function(event) {
                //Allow only backspace and delete
                if (event.keyCode != 46 && event.keyCode != 8) {
                    if (!parseInt(String.fromCharCode(event.which))) {
                        event.preventDefault();
                    }
                }
            }
        );

Answer 7

Вот способ с регулярным выражением:

$('input').bind('keypress', function (event) {
var regex = new RegExp("^[0-9]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
   event.preventDefault();
   return false;
}

});

https://jsfiddle.net/astrapi69/qbk2vjty/1/

И вы можете изменить регулярное выражение на что угодно, если хотите ограничить другие символы, а не цифры.

Answer 8

Вы можете использовать Номер типа ввода HTML5 для ограничения только числовых записей:

<input type="number" name="someid" />

Это будет работать только в браузере жалоб HTML5. Убедитесь, что тип документа вашего HTML-документа:

<!DOCTYPE html>

Для общего назначения вы можете пройти валидацию JS, как показано ниже:

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<input type="someid" name="number" onkeypress="return isNumberKey(event)"/>

Если вы хотите разрешить десятичные дроби, замените «если условие» следующим:

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))

Источник: Ввод текста HTML разрешен только числовой ввод

JSFiddle demo: http://jsfiddle.net/Gagan_Gami/nSjy7/333/

Answer 9

попробуйте в html-коде, как onkeypress и onpast

<input type="text" onkeypress="return event.charCode >= 48 && event.charCode <= 57" onpast="return false">

Answer 10

Это может быть излишним для того, что вы ищете, но я предлагаю плагин jQuery с именем autoNumeric () - это здорово!

Вы можете ограничиться только числами, десятичной точностью, максимальными / минимальными значениями и т. Д.

http://www.decorplanit.com/plugin/