Как разрешить вводить только цифры в input на jQuery?
$(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*" />
detector