§10. Фильтрация ввода в полях INPUT

Один мой клиент ну очень захотел, чтобы в полях ввода, в которых ожидается число, было невозможно ввести что-нибудь, кроме цифр.

Ох и намучился я, пытаясь сделать это при условием кроссбраузерности (IE, FF, Opera, Chrome, Safari)! Но результата добился. С удовольствием делюсь им ниже.

Вот текст функции, принимающей в качестве второго параметра регулярное выражение (именно этому выражению должен соответствовать каждый вводимый в поле символ). Первый параметр фиксирован (требуется указывать объект event).

function filter_input(e,regexp)
{
  e=e || window.event;
  var target=e.target || e.srcElement;
  var isIE=document.all;

  if (target.tagName.toUpperCase()=='INPUT')
  {
    var code=isIE ? e.keyCode : e.which;
    if (code<32 || e.ctrlKey || e.altKey) return true;

    var char=String.fromCharCode(code);
    if (!regexp.test(char)) return false;
  }
  return true;
}

Осталось «прицепить» к полю, в котором требуется фильтровать ввод, событие onkeypress:

<input type="text" onkeypress="return filter_input(event,/\d/)">

Нужно обязательно использовать оператор return при вызове нашей новой функции filter_input(event,…).

Примеры:

onkeypress="return filter_input(event,/\d/)"


onkeypress="return filter_input(event,/[A-ZА-Я]/i)"

Код совместим с IE 6+, FF 3+, Safari, Opera, Chrome.
Клавиши управления курсором работают!

12 комментариев

  1. А возможно сделать еще так, чтобы в поле «Введите слово» нельзя было вводить определенные слова (например Администратор, Админ и т.д.?)

    1. ну а какие проблемы. пишите регулярку соответствующего содержания и вперед…
      типа ‘/(админ|администратор|модератор)/’ (при такой регулярке замените
      if (!regexp.test(char)) return false;
      замените на
      if (regexp.test(char)) return false;)
      —————
      ТС предложил действительно оч хорошее решение — и весьма компактное. у меня занимало раза в 2 больше места…

  2. Мужики, помогите с выражением, всю голову уже поломал, ничего не выходит. Нужно вводить VIN код автомобиля, и хочу контролировать это дело прямо при вводе. VIN код состоит из 17 символов, последние 6 могут быть только цифрами, остальные и цифрами, и буквами (только латинскими в верхнем регистре), среди букв не может быть символов I, O и Q. Такое вообще возможно написать, или не парится и делать проверку через банальную функцию, повешенную на OnBlur?

  3. Все классно — спасибо,
    НО… как отловить ESC?
    чтобы по нему был отказ от ввода.
    Пробовал по keyup, но тогда
    любые символы «пролазают» в input.
    Игнорируется return false в функции.
    Как можно это обойти?

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

  5. Единственное плохо, не работает в планшетах и смартфонах с экранной клавиатурой, полное игнорирование запрета.
    И похоже нет нормального решения для этих чудо-устройств =)))))

Добавить комментарий для Юрий Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *