Поле для ввода только цифр на jQuery

Доброе время суток! В сегодняшней статье разберем как сделать фильтрацию в тектовом поле на jQuery.

Нам нужно запретить пользователю ввод в текстовое поле формы

<input type="text" class="num">

любых данных кроме цифр. Для этого воспользуемся библиотекой jQuery и функцией .keydown:

$(document).ready(function() {
    $("input.num").keydown(function(event) {
        // Разрешаем нажатие клавиш backspace, Del, Tab и Esc
        if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 ||
             // Разрешаем выделение: Ctrl+A
            (event.keyCode == 65 && event.ctrlKey === true) ||
             // Разрешаем клавиши навигации: Home, End, Left, Right
            (event.keyCode >= 35 && event.keyCode <= 39)) {
                 return;
        }
        else {
            // Запрещаем всё, кроме клавиш цифр на основной клавиатуре, а также Num-клавиатуре
            if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                event.preventDefault();
            }  
        }
    });
});

В данном примере ввода только цифр используются цифры не только из основной основной клавиатуры, но и цифры из дополнительной, цифровой клавиатуры, так называемой NUM-клавиатуры.

Также нельзя забывать делать проверку ввода данных на стороне сервера:

<?php
/** Чтобы проверить на стороне сервера на наличие только цифр */
if(is_numeric($_POST['input'])) {
    // проверка пройдена
}

Скачать рабочий пример