Ограничение ввода с помощью jQuery.

Перевод статьи:  Restricting input with jQuery.
Автор:  Ben Moss.

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

Принимаемые нами решения зависят от того, что мы имеем в своем распоряжении на данный момент и в большей степени определяются способом нашего мышления. Вы ведь не используете символы верхнего регистра при вводе данных в банкомат, не так ли? Конечно же нет, потому что устройство ввода в банкомате располагает только цифровыми кнопками. Вы можете ввести неверную цифру, но я уверен, что никто из вас не пытался ввести свой E-mail адрес или девичью фамилию своей матери в банкомат.

В этом и заключается проблема – клавиатура, которой мы зачастую пользуемся усложняет процедуру ввода данных в Интернете. Она содержит от 75 до 100 клавиш, а с помощью их различных комбинаций можно ввести множество других символов. И войти в Facebook с использованием обычной клавиатуры, это то же самое, что сгонять за молоком на Феррари.

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

Такая ситуация ведет к серьезной проблеме, связанной с юзабилити – пользователи постоянно вынуждены вносить коррективы в уже введенные данные для того чтобы удовлетворить требованиям формы. А это прямой путь к разочарованию пользователя и его потере, что влечет за собой негативные последствия для бизнеса.

Устройства с сенсорными экранами достигли большего успеха в этой области путем модификации экранной клавиатуры с целью ее адаптации к тем типам данных, которые допускаются в определенной ситуации. К примеру, при вводе своего адреса электронной почты на iPhone вы просто не сможете по ошибке ввести символ пробела, по той причине, что он просто не предусмотрен на предложенной вам экранной клавиатуре.

Изображение.

Виртуальная клавиатура взята с фотобанка Лори.

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

Для начала необходимо при помощи HTML разметки создать поле ввода, которое мы будем использовать в нашем примере для ограничения вводимых данных. Допустим оно должно допускать ввод только телефонных номеров. Вот наш код:

<fieldset>
<label for="phone">Phone:</label>
<input type="text" id="phone" />
</fieldset>

Далее, в рамках заголовка документа подключаем библиотеку jQuery с помощью следующего фрагмента кода:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

И сразу же за ним добавляем необходимый скрипт:

<script type="text/javascript">
$(document).ready(function() {
$('.phoneInput').keypress(function(key) {
if(key.charCode < 48 || key.charCode > 57) return false;
});
</script>

Этот скрипт выполняется один раз по окончании загрузки документа, добавляя полю ввода с классом .phoneInput метод keypress. В результате мы можем с легкостью, по свойству charCode определить какая клавиша была нажата пользователем. Символ 0 соответствует коду 48, 149 и так далее. А при вводе любого другого символа, не входящего в обозначенный нами диапазон, функция возвращает значение false. При этом если метод keypress возвращает значение false, то браузер просто игнорирует нажатие недопустимой в данном случае клавиши.

Это значит, что если пользователь попытается ввести любой другой символ, который не является цифрой 0 — 9, то ввод будет проигнорирован, что дает в результате эффективное ограничение вводимых данных до цифровых значений.

Этот подход мы можем применить для определения ограничений ввода для любого другого поля ввода пользовательской формы, создавая при этом более сложные правила, с использованием логических операторов, таких как AND или OR. К примеру, если нам необходимо ограничить вводимые данные для поля, предназначенного для указания фамилии, то нужно допустить ввод букв нижнего (97-122) и верхнего (65-90) регистра, а также предусмотреть наличие дефиса (код 45):

$('.surnameInput').keypress(function(key) {
if((key.charCode < 97 || key.charCode > 122) && (key.charCode < 65 || key.charCode > 90) && (key.charCode != 45)) return false;
});

*Используемые в статье коды клавиш относятся к латинским буквам, полный список кодировки клавиатуры неплохо представлен здесь.

Результат работы примера вы можете увидеть на этой демо странице.

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

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

* Примечание переводчика.

Комментариев: 8 на Ограничение ввода с помощью jQuery.

  1. А как можно запретить ввод определенного номера телефона? скажем if(key.charCode < 9878732873) return false; Есть такая функция?

    1. Если вы хотите предотвратить ввод определенного номера телефона, то вам нужно использовать метод .val(), который возвращает значение поля ввода. То есть необходимо усложнить условный оператор функции, добавив в него проверку введенного в поле значения:


      <script type="text/javascript">

      $(document).ready(function() {

      $('.phoneInput').keypress(function(key) {

      if((key.charCode < 48 || key.charCode > 57) ||
      (this.val() == "123456789")) return false;

      });

      </script>

    1. Для этого существуют методы проверки данных форм на уровне php. В этой статье обсуждается возможность контроля ввода данных с клавиатуры, а их обработка — это уже другой вопрос.

      1. Бред. PHP тут не нужен. У jquery есть можно обрабатывать .on(‘input’,…), что заодно и с paste решит проблему

  2. Минусы вводятся в поле surname.Можно скопировать любой символ и вставить в поля,при этом ничего не вводя:)Незачет.

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

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