Как разрешить вводить в input только цифры на jQuery?
Привет!
Давно я не оставлял каких-нибудь полезных заметок, так что пора бы это сделать. Сегодня я расскажу всем любителям веб программирования, как сделать так, чтобы пользователь не мог вводить никакой другой информации в input кроме цифр. Тоже довольно распространенная проблема.
Предположим, что нам необходимо вводить в input типа text какое-то число. Может у нас калькулятор, или просто поле, в которое необходимо указать Ваше любимое число. Так или иначе раньше люди занимались фигней, и просто делали кучу проверок.
Если введенная информация оказывалась не числом, тогда вылезали ошибки, предупреждения. Проблема в том, что люди и по сей день так поступают. А зачем, если можно просто запретить вводить в input числа?
Алгоритм такой - не секрет, что у каждой кнопки есть свой личный код, по которому компьютер и понимает, что за кнопка была нажата. Это так называемые key-коды. Суть в том, чтобы запретить вводить в input информацию с любых кнопок, кроме тех, чьи key-коды находятся в определенном промежутке.
Как разрешить вводить в input только цифры?
Ниже я приведу готовый код, который реализует приведенный мною алгоритм.
Допустим у нас есть input поле с id="wpguru_field".
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(document).ready(function() { $("#wpguru_field").keydown(function(type) { // Мы разрешаем: backspace и delete, стрелки влево\вправо и выделение Ctrl+A if ( type.keyCode == 46 || type.keyCode == 8 || (type.keyCode >= 35 && type.keyCode <= 39) || (type.keyCode == 65 && type.ctrlKey === true )) { return; } else { //Если введена цифра, тогда все хорошо if ((type.keyCode < 48 || type.keyCode > 57) && (type.keyCode < 96 || type.keyCode > 105 )) { type.prtypeDefault(); } } }); }); |
Вот и весь код. Добавил комментариев для наглядности, чтобы понимали где и что. Если понадобится отключить какую-то кнопку, либо добавить, например, пробел, тогда просто посмотрите в интернете, какой key-код подходит для пробела. И просто добавьте еще одну проверку.
А так по сути все самое важное я подключил. Все, теперь Вы знаете как можно разрешить вводить в input только цифры! Моя миссия выполнена.
Желаю успехов!
Комментарии