Уважаемые друзья, временно не работает форма вопрос - ответ. В бижайшее время починю. Если у кого есть вопросы, можете присылать мне на почту bezramok-tlt@mail.ru

JQuery ввод телефона по маске

JQuery маска ввода телефона

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

В настоящее время на многих web ресурсах существуют формы обратной связи. В данные формы зачастую просят ввести свой номер мобильного телефона для дальнейшей связи свами или уточнения каких-то деталей по вашему заказу и т.д. Чтобы пользователю было удобно вводить свой телефон в поле input необходимо использовать какой-нибудь плагин на JQuery для создания маски ввода номера сотового телефона. Вот с одним из таких плагинов я хочу вас познакомить.

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

  • a – любые значения букв (A-Z,a-z)
  • 9 – любые цифровые значения (0-9)
  • * – любые значения букв и цифр (A-Z,a-z,0-9)

Перейдем от слов к практике. Для установки плагина Masked Input Plugin нам понадобится библиотека JQuery не ниже 1.9. Далее необходимо скачать сам плагин с офф. сайта разработчика.

И так, подключаем библиотеку JQuery и плагин для Masked Input Plugin.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>

Далее вызываем плагин с нужными нам параметрами.


<script>
$(document).ready(function(){
	$("#date").mask("99/99/9999",{placeholder:"mm/dd/yyyy"});
	$("#phone").mask("+7(999) 999-9999");
	$("#phoneadd").mask("+7(999) 999-9999? x99999");
	$("#pk").mask("a*-999-a999");
	$("#ssn").mask("999-99-9999");
	$("#tax").mask("99-9999999");
})
</script>

Пример использования плагина

Ввод телефона
Ввод телефона с добавочным номером
Ввод даты
Ввод SSN
Ввод Product Key
Ввод Tax ID

Это не все возможность данного плагина, рассмотрим остальные методы которые предоставляет нам данный плагин.

placeholder позволяет нам установить placeholder при клике мышки в поле input.


<script>
$(document).ready(function(){
	$("#date").mask("99/99/9999",{placeholder:"mm/dd/yyyy"});
})
</script>

completed позволяет выполнить действие после того как пользователь ввел данные согласно маске ввода. Это может быть как сообщени о корректном вводе, так и отправкой AJAX запроса на сервер.


<script>
$(document).ready(function(){
$("#date").mask("99/99/9999",{completed:function(){alert("Вы ввели дату: " +this.val());}});
})
</script>

Также существует свойтсво definitions позволяющее вам создавать свои наборы символов для ввода.


<script>
$(document).ready(function(){
	$.mask.definitions['~']='[+-]';
	$("#eyescript").mask("~9.99 ~9.99 999");
})
</script>

Как видно из примера символ ~ стал шаблоном для ввода символов + и -

Женек
08:16:00 08/09/2016г.
Сутки мучался, написал вопрос, тут же решил. В общему нужно конструкцию .mask(); в document.ready обернуть. Тогда placeholder работает.

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



<script>
$(document).ready(function(){
$("#date").mask("99/99/9999",{placeholder:"mm/dd/yyyy"});
})
</script>


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

- Администрация     - 08:55:44 08/09/2016г.

Женек
08:08:52 08/09/2016г.
Прошу прощения. Сам вижу, что фигню написал. В общем можно ли как то предустановить номер телефона? Например я  получаю номер в $_GET и хочу, что бы он сразу стоял в поле. Пробовал через input и placeholde. Так не работает.

Женек если Вам нужно установить значение пришедшее от пользователя скажем GET или POST то в поле input используйте атрибут value="" и туда подставляете нужные данные!



<input name="mask" type="text" value="'.$_GET['mask'].'" />

- Администрация     - 08:54:51 08/09/2016г.

Женек
10:09:55 06/09/2016г.
А как сделать, что бы при нажатии на поле курсов всегда устанавливался в начало? (если не были введены символы)

Не совсем понятен Ваш вопрос, сформулируйте более конкретно.

- Администрация     - 12:48:19 07/09/2016г.

  • 1

Получить уведомление на Email

Введите код с картинки