<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

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

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Маска ввода телефона на jQuery

Маска ввода телефона на jQuery

Заказчики лэндингов часто просят сделать маску ввода телефона, желая таким образом задать определённый стандарт вводимых номеров клиентами. Для реализации поставленной задачи необходимо подключить библиотеку jQuery.

Поставьте следующий код перед закрывающимся тегом body:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Дальше вам надо скачать плагин с официальной его страницы: http://plugins.jquery.com/maskedinput/, в папку js и вставить код в HTML-файл после библиотеки jQuery:

<script src="js/jquery.maskedinput.min.js"></script>

Для быстроты создадим форму на Bootstrap, с полями ввода для имени и телефона, это такой стандартный вариант для лэндингов. Не забываем в шапку подключить ссылку на bootstrap.min.css.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Маска ввода телефона на jQuery</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
 <style>
  form {
   background-color: #f3f3f3;
   padding: 20px;
   margin: 20px;
   }
 </style>
</head>
<body>
 <div class="container">
  <div class="row">
   <div class="col-sm-4">
    <form action="" method="POST">
    <legend>Название формы</legend>
     <div class="form-group">
      <label for="">Ваше имя</label>
      <input type="text" class="form-control" id="" name="name" placeholder="Имя">
     </div>
     <div class="form-group">
      <label for="">Ваш номер телефона</label>
      <input type="tel" class="form-control" id="phone" name="phone" placeholder="+7 (999) 99 99 999">
     </div>
    <button type="submit" class="btn btn-primary">Отправить</button>
    </form>
   </div>
  </div>
 </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/jquery.maskedinput.min.js"></script>
</body>
</html>

На скриншоте вы видите форму с маской для телефона, когда поле для ввода в фокусе. Это уже отрабатывает плагин jQuery Masked Input.

Маска ввода телефона на jQuery.

Инструкция по работе плагина

На GitHub есть подробная инструкция по работе плагина jQuery Masked Input. Между тегами <script>..</script> напишем простой и короткий код.

Первым делом пропишем стандартную форму

$(document).ready(function()

для того, чтобы скрипт начинал работать, только после того, как вся структура DOM всех элементов загрузилась и была готова. Находим на сайте функцию .mask, которая как раз и позволяет нам сделать определённую маску, используя которую, мы можем заставить пользователя, ввести нужную нам информацию.

Из примера на сайте, возьмем маску для телефона.

$("#phone").mask("(999) 999-9999");

Пропишем в input для телефона у нашей формы id="phone", он должен совпадать с #phone в параметрах плагина. Затем указываем свою маску:

$("#phone").mask("+7 (999) 99-99-999");

В итоге наш код будет таким:

<script>
    $(document).ready(function() {
    $("#phone").mask("+7 (999) 99-99-999");
  });
</script>

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

Посмотреть как работает маска при вводе телефона можете здесь:

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (2):

d@ncing_cat d@ncing_cat 04.07.2018 11:25:56

Михаил здравствуйте, спасибо за полезную статью. Возникло 2 вопроса: - Почему в данном случае jQuery подключается в body, а не в head'e (или это не принципиально)? - Можно ли обращаться к полю не через id - $("#phone"), а через имя $("#phone")? Заранее спасибо.

Ответить

porsake porsake 04.07.2018 20:01:30

да, можно подключать скрипты везде, это не принципиально. Можно обращаться просто к названию селектора, так как в коде стоит, если они без классов или id.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.