<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

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

Подписавшись по 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-код ссылки для форумов (например, можете поставить её в подписи):

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

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.

Ответить

valet valet 25.07.2019 23:38:04

А если не так $(document).ready(function() { $("#phone").mask("+7 (999) 99-99-999"); , А если сделать так $(document).ready(function() { $("#phone").mask("+7 (999) 999-99-99"); ,маска будет работать так чтобы сначала сначала номера (после скобок) вводилось три цифры а потом по две

Ответить

valet valet 28.07.2019 23:51:39

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

Ответить

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