Web-разработчик должен всегда уделять внимание мелочам, особенно когда эти мелочи влияют на удобство работы конечного посетителя с его сайтом.
Если Вы разрабатываете большую форму, которую посетитель должен заполнить, то не лишним будет немного помочь ему в этом. К примеру, можно легко и просто обезопасить посетителя от ввода паразитных символов. К примеру, человек при быстром наборе может просто не увидеть, что при вводе своего номера телефона, он случайно набрал лишний символ. После отправки формы, сервер ему все же укажет на ошибку, украв при этом драгоценное время.
Проще для всех сделать проверку введенной информации еще на этапе ввода, что позволяет сделать JS.
Что нас спасет?
С приходом HTML5 стало возможным проверять input`ы на предмет вводе не нужных символов. За это отвечает параметр pattern. Но пока что он недостаточно гибок и не позволяет решить все необходиме потребности.
Именно из-за этого и приходиться прибегать к старому доброму JS.
Проще всего реализовать такую проверку на JS+jQuery+плагин Masked Input. Этот плагин позволяет осуществлять проверку дотаточно гибко.
Официальная страница проекта находиться здесь, где можно посмотреть примеры того, что умеет этот плагин так и скачать его.
Реализация
Для начала нам необходимо подключить jQuery и плагин Masked Input
<script src="/js/jquery.js"></script>
<script src="/js/jquery.maskedinput.js"></script>
После подключения можно уже начинать использовать:
<script>
$(function() {
$(".date").mask("99.99.9999"); // Для даты
$(".phone").mask("(999) 999-9999"); // Для телефона
});
</script>
На сайте можно найти еще много различных примеров, которые делают этот плагин поистине универсальным.
Комментарии
Нет комментариев к данной статье.
Комментарии