Мастер-классы по Javascript Екатеринбург Ростов-на-Дону Москва Узнать больше...
Содержание (скрыть) Содержание (показать)

Поле только для цифр

Создайте поле, которое позволяет вводить с клавиатуры только цифры. Пример ниже.

В поле должны нормально работать специальные клавиши Delete/Backspace и сочетания c Ctrl/Alt.

Исходный документ: tutorial/browser/events/numeric-input-src/index.html.

Подсказка: событие
Решение
Подсказка: событие

Нам нужно событие keypress, так как по скан-коду мы не отличим, например, клавишу '2' обычную и в верхнем регистре (символ '@').

Нужно отменять действие по умолчанию (т.е. ввод), если введена не цифра.

Решение
Решение

Нам нужно проверять символы при вводе, поэтому, будем использовать событие keypress.

Алгоритм такой: получаем символ и проверяем, является ли он цифрой. Если не является, то отменяем действие по умолчанию.

Кроме того, игнорируем специальные символы и нажатия со включенным Ctrl/Alt.

Итак, вот решение:

input.onkeypress = function(e) {
  e = e || event;
  
  if (e.ctrlKey || e.altKey || e.metaKey) return;  

  var chr = getChar(e);

  // с null надо осторожно в неравенствах, 
  // т.к. например null >= '0' => true
  // на всякий случай лучше вынести проверку chr == null отдельно
  if (chr == null) return;
  
  if (chr < '0' || chr > '9') {
    return false;
  }
}

Полное решение тут: tutorial/browser/events/numeric-input/index.html.

#128
Наверх

Реклама

Нашли опечатку?

Нашли опечатку на сайте? Что-то кажется странным?
Выделите соответствующий текст и нажмите Ctrl+Enter!

Последние Комментарии

Помоги другим!

Помоги другим узнать о хорошей статье!