Как сделать форму для телефона в html

Обновлено: 06.07.2024

Подключите intlTelInput.css между тегами head вашей страницы.

Создайте поле для ввода телефона.

Подключите библиотеку jQuery и плагин jQuery International Telephone Input в конце страницы перед закрывающим тегом body.

Инициализируйте плагин следующим образом:

Примеры с International Telephone Input

Воспользуемся методом isValidNumber , а также библиотекой libphonenumber от Google чтобы проверить правильность введенного номера телефона. Наш HTML-код будет таким:

С помощью IP определим страну пользователя и выведем ее в строке ввода телефона. Для этого установите defaultCountry значение 'auto' и запустите функиию для geoIpLookup, чтобы совершить запрос JSONP к ipinfo.io, который покажет страну нахождения пользователя, основываясь на его IP.

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

Используем статический метод getCountryData чтобы создать отдельный выпадающий список со странами, а затем прослушивая события, синхронизировать страну в поле ввода телефона и в выпадающем списке. HTML-код для данного примера:

Выведем только европейские коды стран с помощью опции onlyCountries .

Воспользуемся статическим методом getCountryData чтобы показывать рядом с флагами только локализованное название страны. HTML код:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

А для активации скрипта в поле по class необходимо заменить код в maskphone.js на следующий:

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

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

Чтобы создать маску для ввода телефонного номера, нам понадобится небольшой jquery скрипт - jquery.maskedinput, вес которого составляет чуть больше 4 кб. Уверен, это приемлемо для любого проекта:) Скачиваем скрипт, подключаем его, предварительно не забываем подключить свежую библиотеку jQuery. Кстати, с помощью этого небольшого скрипта можно создать маску для ввода не только телефона.

Теперь создадим простое поле ввода:

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

Помимо этого доступны следующие варианты ввода:

a — Все алфавитные значения (A-Z,a-z)
9 — Все цифровые значения (0-9)
* — Любые алфавитно-цифровые значения (A-Z,a-z,0-9)

Полный код страницы:

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

В этом коде между кавычек placeholder:" " можно написать любой символ, который будет использоваться в качестве разделителя.

Также есть возможность выполнить какое-нибудь действие по успешному завершению ввода. Тогда код будет такой:

Довольно удобная штука при правильном применении. Вот и все. Правильных и удобных полей ввода вам!

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

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

Создать форму для ввода телефонного номера в формате хх-хх-хх
Здравствуйте.. подскажите, как можно Создать форму для ввода телефонного номера в формате хх-хх-хх.

Кто использовал плагин Masked Input ? (для маски телефонного номера)
есть небольшой вопросик, как сделать так чтобы маска была видна постоянно, а не тогда когда.

Реализовать контроль ошибок ввода данных в поле, предназначенное для ввода номера телефона
1.Реализовать в JavaScript контроль ошибок ввода данных в поле, предназначенное для ввода номера.

Преобразование телефонного номера
Номер телефона хранится в формате +380975555555. На выводе нужно функцией преобразовать в формат.

Решение

Вывод телефонного номера (ссылкой)
Здравствуйте. Никак не получается сделать такую вещь. В базе номер телефона вида 42211. вывод через.

Не работает ввод телефонного номера
Доброе утро! Столкнулись с такой проблемой. Примерно раз в два-три дня приходят жалобы от.

Программа декодирования телефонного номера
Написать программу декодирования телефонного номера для АОН. По запро-су АОНа АТС посылает.

Поиск телефонного номера в строке
Всем привет. Такая задача. Есть текст. Надо написать программу, которая проверяет, есть ли в строке.

Читайте также: