Ввод телефона по маске с помощью JQuery

Ввод телефона по маске с помощью 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

Поддержи проект:


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

08/09/2016 08:16:00

Администрация
Администрация

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


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

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

08/09/2016 08:55:44

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

08/09/2016 08:08:52

Администрация
Администрация

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


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

08/09/2016 08:54:51

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

06/09/2016 10:09:55

Администрация
Администрация

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

07/09/2016 12:48:19


Copyright © 2014 - 2021 All rights reserved.