$(document).ready(function() { $("#txtbox").keydown(function(event) { // Разрешаем: backspace, delete, tab и escape if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || // Разрешаем: Ctrl+A (event.keyCode == 65 && event.ctrlKey === true) || // Разрешаем: home, end, влево, вправо (event.keyCode >= 35 && event.keyCode <= 39)) { // Ничего не делаем return; } else { // Обеждаемся, что это цифра, и останавливаем событие keypress if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) { event.preventDefault(); } } }); });
Ещё одно решение:
jQuery.fn.ForceNumericOnly = function() { return this.each(function() { $(this).keydown(function(e) { var key = e.charCode || e.keyCode || 0; // Разрешаем backspace, tab, delete, стрелки, обычные цифры и цифры на дополнительной клавиатуре return ( key == 8 || key == 9 || key == 46 || (key >= 37 && key <= 40) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105)); }); }); };
Использование:
$("#txtbox").ForceNumericOnly();
Способы выше только фильтруют ввод с клавиатуры. Они не сработают, если пользователь будет вводить данные с помощью мышки (через контекстное меню). Поэтому Вам может понадобиться более продвинутый способ отсеивания, который будет срабатывать каждый раз при изменении текста. В jQuery есть событие .change для отслеживания изменений текстового поля. К сожалению, оно срабатывает только тогда, когда поле теряет фокус. Также есть событие .input, но оно не работает в IE ниже 9-й версии, а в самой девятке немного глючит. Тем не менее, если поставить фильтрацию на все необходимые события, то можно добиться вполне нормального результата с помощью короткого кода:
$(''#txtbox'').bind("change keyup input click", function() { if (this.value.match(/[^0-9]/g)) { this.value = this.value.replace(/[^0-9]/g, ''''); } });
Используя HTML5, можно предупредить пользователя о том, что он неправильно ввел данные. Требуется, чтобы поля ввода находились внутри формы. Когда пользователь введет данные и нажмет на кнопку submit, форма не будет отправлена на сервер, а браузер выведет сообщение о том, что поле заполнено некорректно. Естественно, пока что это работает только в новых браузерах.
<input id="text4" type="number" />
Или так, с помощью регулярного выражения:
<input id="text5" type="text" pattern="\d*" />