шаблон для номера телефона

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

Для того, чтобы вы понимали о чем речь:

maska nomera telephona

Наверняка вы видели подобные эффекты на других сайтах. Когда можно ввести данные только в определенной последовательности.

Теперь необходимо скачать и подключить плагин maskedinput.js. Скачать его можно с официального сайта, а подключаем следующим образом:

Теперь необходимо создать саму маску. Для этого воспользуемся следующим кодом:

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

maska vvoda nomera telephona

Надеюсь вам стало понятно как создается такой эффект. Существуют и другие значения для масок:

Всем, кто искал альтернативу или «баг» мешает нормальному приему заявок, рекомендую почитать эту статью.

51 комментарий

ca3f1ecb912b32d7b4e9f33322142080 48

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

7d58e79688c0a77c17b164f6be91135f 48

Как раз работа с твоим сайтом и вдохновила на написание этой статьи))

230b37489f32deb0008b2d52a568bc88 48

JS Выдает ошибку «Uncaught TypeError: undefined is not a function»

7c844aea643fb3160bcd876958d9590b 48

А как добавить русские буквы?

7d58e79688c0a77c17b164f6be91135f 48

Привет. Заменить на A-Яa-я, и все будет в порядке)) Спасибо, добавлю в статью, чтоб понятнее было)

7c844aea643fb3160bcd876958d9590b 48

Классная статья, пользуюсь случаем и хочу пропиарить свой первый проект, _https://vk.com/flokirovanie_na_zakaz_kharkov Буду рад посещению в группу

4b75acc6ad22832766bc1f9544b2abc1 48

Маска работает, а как сделать так, чтобы на сервер отправлялись числа без маски?
то есть в поле вводится тел вида (987) 987-87-87, а на сервер отправляется 9879878787

230b37489f32deb0008b2d52a568bc88 48

удали все ненужные символы кроме чисел и все )

7c844aea643fb3160bcd876958d9590b 48

Хотя может есть способ проще это сделать. Это первое что в голову пришло.

7c844aea643fb3160bcd876958d9590b 48

7c844aea643fb3160bcd876958d9590b 48

Подскажите, как сделать, чтобы каретка при наборе номера всегда откатывалась влево, чтобы клиент не мог случайно начать писать свой номер с середины, теряя последние цифры номера? Просто были такие случаи)

230b37489f32deb0008b2d52a568bc88 48

Спасибо, Дима.
Реально полезная вещь.

7c844aea643fb3160bcd876958d9590b 48

У меня возникает такая ошибка в консоли
TypeError: jQuery(. ).mask is not a function
Библиотека jQery есть
скрипт maskedinput скачал и подключил
Это вставил в head

jQuery(document).ready(function() <
jQuery(«#Number»).mask(«(999) 999-9999»);

Не работает + таймер пропадает. В чем может быть проблема?

7d58e79688c0a77c17b164f6be91135f 48

В конфликте скриптов

7c844aea643fb3160bcd876958d9590b 48

7d58e79688c0a77c17b164f6be91135f 48

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

230b37489f32deb0008b2d52a568bc88 48

Попробуйте дать права файлу maskedinput

7c844aea643fb3160bcd876958d9590b 48

Дмитрий,вы не знаете, где можно альтернативу посмотреть?

7d58e79688c0a77c17b164f6be91135f 48

альтернативу какому скрипту?

7c844aea643fb3160bcd876958d9590b 48

Дмитрий я тестировал, убрал все скрипты, вс еравно не пашет, я не понимаю,. Может быть я установил что-то не так.

7d58e79688c0a77c17b164f6be91135f 48

7c844aea643fb3160bcd876958d9590b 48

7c844aea643fb3160bcd876958d9590b 48

required внутри поля так и матюкается, даже если поле заполнено. как исправить, не хочу использовать скрипты для проверки на заполненность. мне и css3 хватает
Как исправить? помогите!

7d58e79688c0a77c17b164f6be91135f 48

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

230b37489f32deb0008b2d52a568bc88 48

7d58e79688c0a77c17b164f6be91135f 48

Использовать разный айди, или пользуйся классами. 2 одинаковых айди (по спецификации), вообще не допустимы на странице.

230b37489f32deb0008b2d52a568bc88 48

Скажите, а как преобразовать пример если на странице несколько одинаковых форм? Как вместо id (#) использовать классы?

7d58e79688c0a77c17b164f6be91135f 48

Вместо решетки использовать точку:

7c844aea643fb3160bcd876958d9590b 48

Чем короче длина значимых символов в маске ввода, тем маска ввода считается меньше и располагается выше.

230b37489f32deb0008b2d52a568bc88 48

Не могу скачать плагин maskedinput.js.
помогите.

7d58e79688c0a77c17b164f6be91135f 48

Каким образом помочь?

7d58e79688c0a77c17b164f6be91135f 48

64a486ffe11e81ea1f37b37cffd9617b 48

7c844aea643fb3160bcd876958d9590b 48

7c844aea643fb3160bcd876958d9590b 48

62e65bece9a563da86bee19640098725 48

и в чем проблема была? у меня тот же прикол.

7c844aea643fb3160bcd876958d9590b 48

ReferenceError: Can’t find variable: jQuery
(анонимная функция)maskedinput.js:7:144
(анонимная функция)maskedinput.js:8

Выше две ошибки, которые отдает консоль

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

2fc683669efe94cf1efb7256bc0ae39f 48

Не знаете ли Вы хорошей альтернативы этому плагину, без таких нюансов?

23b11688762a5607dfcc646f98a0e181 48

Все клёво работает, спасибо! Но есть одно «но». Скрипт конфликтует с плагином Crayon Syntax Highlighter (который, кстати, насколько я понимаю, используется и на данном сайте). Т.е. при активации плагина Crayon маска перестаёт работать. Может эту проблему можно как-то исправить, но у меня не получилось.

7c844aea643fb3160bcd876958d9590b 48

У тех у кого ошибка типа TypeError: jQuery(…).mask is not a function

есть решение, вместо доллара пишите jQuery
будет что то типа этого

jQuery(document).ready(function() <
jQuery(«input[type=tel]»).mask(«+7(999) 999-9999»);
>);

7c844aea643fb3160bcd876958d9590b 48

На мобилках плохо работает. При вводе номера цыфры перемешываються((.

fb4fbf84952735912297f86ef95871a9 48

Причем не на всех мобилах. У меня и у жены Андроиды. У меня браузер Хром, у нее штатный, который был в LG. У меня каретка при вводе телефонного номера (+7 ___ ___-__-__) ведет себя некорректно (для правильного ввода приходится в местах пробелов и дефисов нажимать кнопку «пробел» на клавиатуре), на телефоне жены — правильно работает (как и с компьютеров). В мобильном Хроме вместо:

И как починить, неясно 🙁

Версия Masked Input 1.4.1

7c844aea643fb3160bcd876958d9590b 48

Михаил, точно такая же проблема. Использовал при написании модуля формы обратной связи Ajax Webfactor Form для Joomla, и такой косяк вылез, пока что советую тем кто использует форму не ставить тип поля tel если есть мобильная версия сайта.

Кстати разработчик скрипта об этой проблеме знает, но пока телится что-то фиксить (

230b37489f32deb0008b2d52a568bc88 48

7d58e79688c0a77c17b164f6be91135f 48

Добавь в маску +7, в чем проблема, не нужен +7, сделай маску такой, какая нужна, в чем проблема?

7c844aea643fb3160bcd876958d9590b 48

Класс, спасибо! Реально сработало

1e9185e05f31e832c2aa0f466e810beb 48

Как сделать, чтобы маска поддерживала два формата ввода?

7d58e79688c0a77c17b164f6be91135f 48

Привязывайтесь к классу поля, и задавайте любую маску для его ввода.

7c844aea643fb3160bcd876958d9590b 48

Было бы хорошо, если бы работало на Маску \валидацию Emailа.

7c844aea643fb3160bcd876958d9590b 48

А как сделать так, чтобы при нажатии на маску курсор всегда перемещался в начало, а то проблема с этим. Хотелось бы, чтобы курсор сам всегда вставал в начало, куда бы я не нажал изначально

7d58e79688c0a77c17b164f6be91135f 48

Роман, воспользуйтесь этой статьей: Маски ввода номера телефона

Источник

Шаблон для номера телефона

js

ВВЕДЕНИЕ

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

Что вы узнаете:

Что такое «паттерн» и что такое «маска»

Код выглядит примерно так:

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

Введите свой номер телефона

Готовый скрипт для ввода телефонного номера

HTML код поля выглядит примерно так:

JS код скрипта:

Как подключить данный скрипт к Joomla

Скрипт подключается очень легко. Просто добавьте его в папку JS вашего шаблона, а в index.php там где подключаете скрипты добавьте строчку:

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

Напоминаю, что вопросы можно задать в группе https://t.me/newqosgroup

Подписывайтесь на канал в Телеграм

Политика сайта

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

Сайт не собирает абсолютно никакой конфиденциальной информации ни под каким предлогом

Сайт не поддерживает никакие меньшинства: радужных дней, флагов и прочей ерунды не будет

Источник

Как реализовать маску ввода телефонного номера?

615211aa2dd27375208063

Upd: Поправил ссылку, спасибо Александр Янк

0cb33761c4d84f8fa851bd7db7100de2

43f8ea6351a24e1181d0bc9e05876398

dc0ef9d69f4c459cb42507aab2430172

Алексей у меня такая же беда, как и у автора вопроса. только добавив такой класс в обеих формах маска перестала появляться.

вот код первой формы:

dc0ef9d69f4c459cb42507aab2430172

565bc9d961fc477587a69e3e519bba2a

Подключаете и используете один из методов:

$(document).ready(function() <
$(selector).inputmask(«99-9999999»); //static mask
$(selector).inputmask(<"mask": "(999) 999-9999">); //specifying options
$(selector).inputmask(«9-a<1,3>9<1,3>«); //mask with dynamic syntax
>);

565bc9d961fc477587a69e3e519bba2a

Ни чего у меня не получилось. 🙁
Я уже пробовал описание как в этом уроке: https://www.youtube.com/watch?v=Ds8CX0yKbYs (вроде бы всё понятно, но не работает должным образом. Точнее вообще не работает 🙁 Попытался разобраться с плагином: https://github.com/andr-04/inputmask-multi такая же петрушка. Видимо делаю что то не так, а что понятия не имею. По видеоуроку, я писал скрипт прям в index.html быть может вовсе не там писать надо? Или быть может в jsфайле надо что то менять.. код обработчика как то дорабатывать надо? Вот кстати и обработчик:

Вот так у меня реализованы инпуты:

Задавал им ID но зезультата увы не достиг 🙁
По видео уроку, такой код получился:

Пожалуйста скажите, что сделать, что б всё заработало согласно моим хотелкам?

Источник

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

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

Первый вариант – мы подключим маску к контактной форме на чистом 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” в корне сайта.

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

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

idForClass

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

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

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

Источник

Поделиться с друзьями
admin
Контакты организаций: номера и телефоны
Adblock
detector