меню

Часто возникает задача запрета ввода не цифровых значений в поле <input>. В этом материале разберем реализацию данного механизма на JavaScript.

На мой взгляд, самый простой способ воспользоваться обработчиком события .keydown() - в jQuery или прослушивать событие keydown. Итак, предположим у нас есть текстовое поле с id = «only_num».

	
<input type="text" id="only_num" value="" />
	

Алгоритм проверки будет такой

  1. При нажатии клавиши на клавиатуре ( событие .keydown() ) будем получать keyCode (возвращает код нажатой клавиши) и анализировать его;
  2. Для цифр основной клавиатуры keyCode принимает значения от 48 (клавиша 0) до 57 (клавиша 9);
  3. Для цифр дополнительной клавиатуры ( Num-клавиатуры ) keyCode принимает значения от 96 (клавиша 0) до 105 (клавиша 9);
  4. Так же разрешим:
    • удалять символы ( клавиша Del ) keyCode == 46;
    • переключаться клавишей Tab между полями keyCode == 9;
    • нажимать Backspace keyCode == 8;
    • нажимать Esc keyCode == 27;
    • выделять текст сочетанием Ctrl + A — вот тут клавиша A имеет код keyCode == 65, а событие зажатого Ctrl ctrlKey должно быть строго истина, т.е. получаем условие — ( event.keyCode == 65 && event.ctrlKey === true );
    • разрешим клавишу Home keyCode == 36;
    • разрешим клавишу End keyCode == 35;
    • разрешим клавишу влево keyCode == 37;
    • разрешим клавишу вправо keyCode == 39;

Последние четыре требования можно объединить в одно — ( event.keyCode >= 35 && event.keyCode <= 39 ), правда в этом случае мы разрешаем еще нажатие клавиши вверх keyCode == 38, но, думаю это не критично, а код получится красивее.

Разрешаем ввод только цифр в поле input на JavaScript

	
const input = document.getElementById('only_num');

input.addEventListener('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 {
		// Запрещаем все, кроме цифр на основной клавиатуре, а так же Num-клавиатуре
		if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
			event.preventDefault();
		}
	}
});
	

Разрешаем ввод только цифр в поле input на jQuery

	
$(document).ready(function() {
  $("#only_num").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 {
	  // Запрещаем все, кроме цифр на основной клавиатуре, а так же Num-клавиатуре
	  if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
		event.preventDefault();
	  }
	}
  });
});
	

Возможно, вам будет интересно

JavaScript and JQuery 1.8.3 решение проблемы с функцией attr() на примере генератора пароля

Совсем недавно решил написать генератор пароля с возможностью просмотра генерированного пароля под звездочками. Для работы выбрал JQuery 1.8.3 и нативный JavaScript. При написании самого скрипта столкнулся с проблемой в JQuery 1.8.3 с функцией attr().

Семь необходимых операторов RxJS

Как front-end разработчик вы знаете, что управление асинхронными данными - это не легкая задача. Иногда кажется, что нужна целая команда клоунов, чтобы держать все эти мячи в воздухе! Но в этом и заключается сила библиотеки RxJS. Она помогает легко манипулировать потоками асинхронных данных.

Определение платформы устройства на javascript

Определить версию и тип браузера проще всего при помощи JavaScript. JavaScript имеет стандартный объект под названием navigator, который содержит данные о браузере пользователя.

Семь важных функций JavaScript

Раннее в JavaScript, когда почти для всего нужна была специальная функция, потому что браузеры реализовывали по своему не только новые, но и базовые функции, такие как addEventListener и attachEvent. Времена изменились, но есть несколько функций, которые каждый разработчик должен иметь в своем арсенале, чтобы повысить производительность работы.

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту