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

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

Часто возникает задача запрета ввода не цифровых значений в поле <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 может сбить с толку по множеству причин, и одна из них — акронимы. Чтобы не дать сокращениям сбить вас с толку, в этой статье мы разберём их значения и историю возникновения.

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

Если Ваше мобильное приложение поддерживает только портретную или только горизонтальную ориентацию, то есть большая вероятность того, что некоторые элементы придётся менять, в зависимости от положения устройства.

наверх