Фильтрация ввода в полях ввода 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,…).

Примеры:

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

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

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

Запись опубликована в рубрике JavaScript с метками . Добавьте в закладки постоянную ссылку.

9 комментариев: Фильтрация ввода в полях ввода INPUT

  1. Юрко говорит:

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

    • vladmax говорит:

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

  2. Юрко говорит:

    А так всё супер! Спасибо! (=

  3. Дима говорит:

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

    • Дима говорит:

      С буквами I, O и Q разобрался, нужно писать [A-HJ-NPR-Z]. Остальное – темный лес.

  4. vlad говорит:

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

  5. svx говорит:

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

  6. Alex говорит:

    Спасибо, ты молодец!

  7. arman говорит:

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

Добавить комментарий

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

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>