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

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