Sdscompany.ru

Компьютерный журнал
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Маска ввода php

Как сделать маску телефона в форме HTML и Contact Form 7

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

Первый вариант – мы подключим маску к контактной форме на чистом html.

Второй вариант — мы рассмотрим, как сделать маску телефона для Contact Form 7, и заодно, как правильно подключать скрипты в WordPress через файл functions.php.

Сперва посмотрим о чем идет речь:

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

Итак начнем! В обоих случаях нужно скачать файлы плагина jQuery Masked Input по этой ссылке с официального репозитория. Также даю ссылку на документации по плагину на GitHub.

Маска ввода телефона к форме на html + js

1. Создаем простую форму

3. Подключаем скрипты плагина

После того как мы убедились, что библиотека JQuery подключена, распаковываем скаченный архив с плагином. Затем нужно перейти в папку dist и забрать от туда минимизированный файл jquery.maskedinput.min.js. Я обычно кладу этот файл в корень сайта в папку со всеми скриптами, и подключаю его между тегами

Далее нам нужно сделать вызов кода маски и привязать его к уникальному идентификатору. Мы можем сделать это прописав уникальный class или id к полю input. В нашем случае мы пропишем id phon. Далее просто перед формой нужно вставить вот этот код:

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

Теперь этот файл тоже нужно подключить, для удобства скопируйте это код и вставьте его сразу после кода подключения плагина jquery.maskedinput.min.js между тегами

4. Определяем в какой форме и в каком поле будет работать плагин.

Всё, что нам нужно сделать, чтобы идентифицировать поле, это указать class или id в нужном поле input. Пример на картинке. На практике используйте что-то одно.

В примере, который я вам привёл, я использовал id — уникальное имя элемента. В таком случае, если у вас несколько одинаковых форм на одной странице маска телефона работать не будет. Так как id на странице может повторяться только 1 раз. Поэтому, если у вас на странице вызывается много раз одна и та же форма нужно прописать в поле input уникальный class.

А для активации скрипта в поле по class прописываем этот код в maskphone.js:

С этим все, теперь рассмотрим как сделать тоже самое на одной из самых популярных CMS WordPress и дополнительного плагина к ней Contact Form 7.

Маска телефона в плагине WordPress Contact Form 7

1. Первым делом проверяем подключение библиотеки jQuery

2. Скачиваем плагин по ссылке

3. Создаем форму в Contact Form 7

Например простейшую форму, как у меня, с одним полем, над которым будем работать

И вот код формы, если кому-нибудь нужно. Class form-flat это стили темы для формы, вам нужно использовать свои:

4. Теперь подключим скрипты

Есть самый простой и на мой взгляд не совсем правильный способ подключения скриптов. Мы просто открываем файл header.php или footer.php, которые расположены по адресу ваш-сайт/wp-content/themes/ваша-тема/ предварительно закинув туда файлы плагина, и вставляем код:

В директории мой-домен.com/wp-content/themes/ваша-тема/js/ создаем файл maskphone.js и вставляем код:

Обращаю ваше внимание, что используем идентификатор id.

Если используем class, то в maskphone.js вставляем такой код:

А в форму вставляем такой код:

[text* your-phone сlass:phon placeholder «Ваш телефон»] [submit class:button primary «отправить»]

Теперь у вас всё будет работать. Если же нет — проверяйте какие идентификаторы вы использовали.

4.1 Подключаем скрипты через файл functions.php

Я всегда использую только такой способ подключения скриптов и файлов css. Это очень удобно. Из проекта в проект на WordPress у меня перетекает кусочек кода и папка с файлами, которые я сейчас приложу для скачивания. Итак, открываем файл functions.php и между тегами

Стоит отметить, что код выше подходит для дочерней темы. Если же вы не используете дочернюю тему, то лучше использовать вот этот код:

Читать еще:  Cross origin html

Подведя итог хочу сказать, что с помощью данного метода можно делать и другие маски ввода но об этом уже в другой статье.

Маска ввода для HTML элемента input

На этом уроке с помощью плагина masked input рассмотрим процесс создания различных масок ввода текстовым элементам формы.

Назначение плагина masked input

Плагин masked input предназначен для установления маски ввода элементу input с помощью кода JavaScript. Данный плагин для своего функционирования требует наличие подключённой библиотеки jQuery. Скачать плагин jquery.maskedinput.js ( jquery.maskedinput.min ) можно посредством следующей ссылки:

Подключение плагина

После того как Вы скачали этот плагин (файл js), его необходимо подключить. Это осуществляется с помощью элемента script :

Создание HTML маски ввода

Создания маски ввода осушествляется в js коде с помощью следующих знаков:

  • Цифра 9 – соответствует цифре от 0 до 9.
  • Символ a – представляет собой любой английский символ (A-Z, a-z).
  • Знак * — представляет собой любой алфавитно-цифровой символ (A-Z, a-z, 0-9).

Например рассмотрим процесс создания маски ввода телефона для элемента input , имеющего id=»phone» :

Создание HTML элементу input маски ввода телефона

Если в качестве заполнителя Вы хотите использовать что-то другое, то его можно указать посредством параметра placeholder следующим образом:

Использование различных заполнителей в масках ввода masked input

Кроме placeholder данный плагин имеет ещё параметр completed . Он предназначен для задания действий, которые будут выполнятся после того как пользователь завершит ввод маски ввода.

Например, выведем с помощью метода alert сообщение пользователю, когда он завершит ввод маски телефона:

Сообщение, отображаемое пользователю после того как он завершил ввод маски телефона

Иногда бывают такие ситуации, когда одна часть маски является обязательной для заполнения, а другая часть нет. Чтобы это указать, в Masked Input используется знак ‘?’ . Этот знак является специальным символом, после которого необходимо разместить часть маски необязательной для заполнения.

Например, пользователю необходимо ввести число от 0 до 0.99 . При этом обязательным для заполнения является указание хотя бы одного знака после запятой.

Демонстрация работы маски для ввода числа с одним или двумя знаками после запятой

Настройка маски ввода Masked Input

Плагин Masked Input позволяет использовать в маске кроме предопределенных специальных знаков ( 9 , a , * ) свои собственные.

Например, создадим для маски специальный символ

, который при вводе должен быть заменён на знак ( + ) или минус ( — ).

Демонстрация работы маски для ввода положительного или отрицательного числа

Например, создадим маску для ввода CSS цвета в шестнадцатеричном формате:

Демонстрация работы маски для ввода цвета CSS в шестандцатиричном формате

Пример создания маски ввода телефона

Рассмотрим пример создания маски для ввода телефона в зависимости от выбранной страны:

Демонстрация работы маски для ввода телефона в зависимости от выбранной страны

Плагин маски ввода для input — jquery maskedinput — инструкция, настройка, инициализация

В этой статье будет рассмотрено решение этой задачи с использованием плагина Masked Input, который отличается простотой и удобством в использовании.

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

Отличительные особенности и возможности плагина Masked Input:

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

Плагин масок полей ввода состоит из основных частей:

  • Демонстрационная HTML разметка
  • JQuery скрипт с кодом плагина

Пример установки плагина Masked Input

Скачайте архив с плагином из репозитория разработчика и скопируйте его содержимое в каталог вашего сайта.

. Для работы скрипта обязательно наличие подключенной библиотеки jQuery.

Инициализация и настройка плагина Masked Input.

Подключите к документу фреймворк jQuery и сам плагин. Обратите внимание, что ранние версии плагина могут не работать с более поздними версиями jquery.

Читать еще:  Php создание изображения

Для подключения маски к полю ввода необходимо добавить соответствующий класс или id:

И инициализировать плагин маски ввода:

Базовые условные обозначения:

    • a — буквы
    • 9 — цифры
    • * — буквы и цифры
    • ? — необязательная часть маски

Часть маски может быть вариативной. Символ «?» маркирует все последующие за ним символы как необязательные, т.е. все, что следует после него, считается необязательным для ввода. Пример:

Дополнительные настройки плагина

1. Возможность создания собственных наборов символов для ввода.

Для создания наборов символов используется свойство definitions, пример:

2. Выполнение действия после завершения ввода.

По завершении ввода можно выполнить функцию с помощью метода completed, пример:

3. Подстановка плейсхолдера в поле ввода.

С помощью свойства placeholder, можно поставить плейсхолдер на текущее поле ввода, пример:

Заключение

Пожалуй, это вся необходимая информация для эффективного использования плагина jquery MaskedInput. Всем спасибо за внимание!

Лучший способ сказать автору «СПАСИБО» рассказать друзьям или поделиться ссылкой!
Другие статьи:

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

Всплывающая фиксированная навигация для сайта jQuery, CSS — инструкция, примеры

DateTimePicker – удобный и легкий в использовании плагин для быстрой подстановки даты и времени в поля ввода.

Плагин DateTimePicker для сайта — инструкция, настройка, инициализация

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

Публикация на стене Вконтакте средствами API — кросспостинг

С помощью PHPExcel можно производить чтение и запись информации в файлы, форматировать их содержимое,выполнять операции с формулами, стилями и т.д.

Чтение excel на PHP — основные методы класса PHPExcel

Текстовый редактор TinyMCE в визуальном режиме при стандартной конфигурации обрезает некоторый теги и свойства.

TinyMCE вырезает теги — исключения для тегов TinyMCE

Научимся вставлять теги в выделенный фрагмент текста, вставлять теги на место селектора в тексте и получать средствами JS HTML код отредактированного текста и текст без HTML сущностей.

Cвойства и методы TinyMCE — вставка тегов, вывод значений

Как вы уже поняли, редактор является платформенным Javascript редактором HTML кода, т.е. WYSIWYG редактором для сайтов и веб приложений. Разработчиком этого полезного продукта является компания Moxiecode Systems AB.

Установка и настройка TinyMCE — инициализация и параметры

В статье мы: познакомимся с каруселью; научимся интегрировать ее на свой сайт; познакомимся с основными параметрами инициализации;рассмотрим самые популярные свойства и методы классов jCarousel

Установка и настройка jCarousel — параметры и методы

Любой backend программист php сталкивается с задачей автоматизации почтовой рассылки на веб сайтах и многие,кто сталкивался с данной задачей впервые, вставали перед ключевым вопросом: «Писать или не писать smtp клиент с нуля?».

Использование jQuery Mask для маскировки ввода через форму

Для валидации значений полей форм лучше всего использовать jQuery Mask . Прежде чем мы начнем, хочу привести несколько ссылок, которые могут быть полезны:

  • Страница проекта на GitHub находится здесь .
  • Страница с примерами и документацией.

Что такое jQuery Mask?

jQuery Mask – это плагин для создания масок полей форм и HTML-элементов ( maskedinput ). Плагин прост в использовании и дружелюбен к пользователям. Хотя он изменяет вводимые данные, он делает это, не меняя того, что видит пользователь.

Например, если вы напечатаете « 555-555-5555 » в поле ввода номера телефона, «-» просто будет пропущено. Плагин сам обработает введенные символы так, чтобы они соответствовали маске.
Пройдемся по наиболее важным частям демонстрационного кода. Недавно я добавил в плагин две библиотеки:

Эти библиотеки добавлены в настройки на CodePen . Ссылки на них нужно прописать в коде проекта, чтобы он работал.

Чтобы наложить маску на ввод, нужно добавить селектор jQuery и функцию .mask( … ) или использовать атрибут HTML data-mask .

Селектор jQuery

Ниже показан пример, в котором используется селектор jQuery . В примеры с почтовым индексом и номером телефона также применяется этот метод, а в примере с номером страховки ( SIN number ) – атрибут data-mask .

Читать еще:  Html viewer как удалить

Я использовал имя поля ввода, чтобы выбрать его, а затем наложил на него маску с помощью функции .mask( … ) . Она принимает последовательность чисел и букв и форматирует их с помощью регулярных выражений:

Но пользователь все еще может перепутать дни и месяцы. Поэтому для дат я все же рекомендую использовать Date Picker из jQuery UI .

Функция .mask( … ) знает как форматировать введенные данные определенным образом, потому что в плагине определен «словарь» символов. По умолчанию перевод следующий:

Если хотите переопределить или добавить что-то, руководствуйтесь следующим примеров, взятым из документации по jQuery Mask :

Атрибут данных HTML

Применение атрибута data похоже на использование селектора, только маску нужно вставить прямо в

. Когда пользуюсь этим плагином, то часто применяю данный метод в файлах шаблонов. Рассмотрим пример с номером страховки:

//»social-insurance» — социальная страховка

Использование jQuery Mask в WordPress

Для использования jQuery mask в WordPress , включите его в очередь скриптов в файле functions.php . Приведенный ниже код будет работать, если в теме есть папка /js :

Я надеюсь, что после прочтения статьи вы попробуете jQuery Mask . Если у вас замечания по jQuery Mask , напишите об этом в комментариях!

Данная публикация представляет собой перевод статьи « Using jQuery Mask to Mask Form Input » , подготовленной дружной командой проекта Интернет-технологии.ру

Маска ввода php

В данной статье мы рассмотрим, как добавить маску для ввода данных в поля формы используя jquery и Masked Input Plugin for jQuery.

Ознакомиться с данным плагином можно на странице GitHub здесь .

Данный плагин позволяет просто создать маску, подключив плагин на странице и прописав скрип:

Результат будет такой

Теперь рассмотрим подробнее и на примере. Маска задается в команде mask()

В ней можно прописать следующие служебные символы:

  • a — соответствует любым буквам (A-Z,a-z)
  • 9 — соответствует числам (0-9)
  • * — соответствует любому символу (A-Z,a-z,0-9)

Поэтому в маске телефона мы указываем +7 как не изменяемые символы и через число 9 отмечаем какие числа в каком виде надо вводить.

Так же можно передавать параметры помимо маски. Например, можно передать подсказку, т.е. placeholder или функцию, которая будет вызываться при успешном заполнении маски.

А теперь создадим форму с маской и посмотрим на примере работу с ней.

Создаем файл mask.php и подключаем в нем файлы jquery и плагин Masked Input Plugin for jQuery, которые заранее скачали и разместили в ту же папку, где создали файл mask.php.

Создаем простую форму в файле. Для примера будем запрашивать телефон и СНИЛС посетителя.

Согласно форме полученные данные будут передаваться в этот же файл (action=» «) методом POST.

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

Давайте проверим как отработает маска. Позже сделаем обработку полученных данных из формы.


При нажатии на поле, подставляется маска и мы заполняем поле только разрешенными символами. Так как в маске мы указали какие символы можно использовать, то не разрешенные символы Вы ввести уже не сможете. Попробуйте в поле телефона указать буквы, не получится.

И теперь добавим обработку формы на php. В начале файла вставляем код.

Логика скрипта:
1) Если нам передали данные методом POST, проверяем есть ли переменные содержащие телефон ($_POST[‘phone’]) и СНИЛС ($_POST[‘snils’]).
2) Если есть телефон, то убираем возможные теги и экранируем данные (для защиты) перед сохранением в переменную и выводит полученный телефон на экран.
3) Если есть СНИЛС, то убираем возможные теги и экранируем данные (для защиты) перед сохранением в переменную и выводит полученный СНИЛС на экран.


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

Полный текст скрипта приложен ниже и размещен в архиве для скачивания.

Ссылка на основную публикацию
Adblock
detector