Вернуться к уроку

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

важность: 5

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

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

P.S. Конечно, при помощи альтернативных способов ввода (например, вставки мышью), посетитель всё же может ввести что угодно.

Открыть песочницу для задачи.

Подсказка: выбор события

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

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

Решение

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

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

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

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

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;
  }
}

Открыть решение в песочнице.