Js маски для телефону. Маскуємо та перевіряємо поле телефону за допомогою jQuery. Навіщо потрібна маска введення

Головна / Захист

На перший погляд, відповідь очевидна: позначити поле номер телефону як обов'язкове для заповнення. Але є ніші, в яких користувач може піти із сайту через зайві обов'язкові поля. Наприклад, програми, софт, сайти з продажу контенту. Втім, номери користувачів для подібних проектів є важливими як додаткові дані, які дають можливість взаємодіяти з потенційними клієнтами в майбутньому. Тим більше, що існує просте та ефективне рішення – використання маски введення. Доведемо це кейсами.

Для чого потрібна маска введення?

Маска введення показує, у якому форматі потрібно вводити дані у полі. Наприклад, якщо користувач вводить номер телефону без коду міста або телефон у поле адреси, йому не вдасться перейти до наступного пункту. Маска у формах забезпечує одноманітний вид даних, що спрощує пошук і управління базою. У рекомендаціях Netpeak маска введення телефонного номера є обов'язковим елементом форми замовлення на сайті. Як і будь-яка практична рекомендація наших фахівців, це положення ґрунтується на успішних кейсах клієнтів.

Оскільки сайт спеціалізувався на програмах, поле для введення номера на сайті було необов'язковим. Для відстеження зміни відсотка клієнтів, які заповнюють поле «телефон» у формі замовлення на сайті, ми застосували зміну користувача в Google Analytics. У лютому поле «телефон» не заповнив жоден із дев'яти покупців. У березні ми запровадили маску введення, і користувачі почали її заповнювати. Для чистоти експерименту поле залишили необов'язковим для заповнення та жодних інших змін не проводили.
Результат за березень - 19 номерів при 22 користувачів, що заповнили заявку. Іншими словами, 85% користувачів, які замовили програму, залишили свій номер телефону.

Кейс сайту інформаційного центру: збільшення кількості заповнень поля телефонного номера на 15,4%

Сайт клієнта займається послугами з написання рефератів, курсових, дипломних та інших робіт. Номер телефону користувача є бажаним для зв'язку, але на сайті це поле було необов'язковим. Користувач міг не заповнювати форму або написати будь-що в даному полі. Як і вперше, на першому етапі ми встановили відстеження заповнення поля "телефон" у Google Analytics. У листопаді із 59 заявок, залишених відвідувачами сайту, 15 не містили номерів. Тобто компанія отримала лише 74,6% відправлених форм із заповненим номером. Потім додали маску введення в поле для телефону. У грудні сайт отримав 60 заявок. При цьому лише 6 заповнених форм не містили телефон клієнта. Отже, 90% відправлених форм замовлення містили правильно заповнене поле телефону. За місяць — зростання на 15,4% лише завдяки впровадженню маски введення номера. Насамкінець — внутрішній кейс агентства.

Поле для номерів у формі замовлення на сайті Netpeak також є необов'язковим. Але номери телефонів важливі, щоб клієнти завжди знали номер та статус своєї заявки (ми надсилаємо ці дані по SMS), а також для оптимізації роботи акаунт-менеджерів. Період експерименту, як і в попередніх прикладах, — два місяці. Через війну появи маски введення номера, відсоток заповнень форм зріс з 44% до 83% — на 39,4%.
Після експерименту ми запровадили маску на сайті. Поле для введення номера залишилося необов'язковим. Заявка не пройде лише тоді, коли в цьому полі введено неправильний номер. При цьому перші цифри в масці змінюються в залежності від країни, де знаходиться користувач сайту. Якщо йдеться про форму попереднього замовлення, то цікаво знати, наскільки якісніша заявка з номерами телефонів. Ми взяли всі заявки, коли-небудь отримані через форму замовлення і обчислили відсоток тих, що конвертувалися в клієнтів без номера та з ним. Останніх виявилося найбільше на 0,81%.

Висновок: якщо людина залишає вам свій номер у формі, це ще не є гарантією перерахування коштів.

Якщо говорити про форму попереднього замовлення, на перший план виходять можливості щодо реактивації клієнтів, можливості, які відкриваються перед маркетологами, озброєними базою особистих телефонних номерів користувачів. Ми розповімо про успішні кейси реактивації в одному з нових постів. А поки що радимо почитати про заходи, які варто вжити перед будь-якими діями з телефонними номерами в базі. Діліться в коментарях своїм досвідом впровадження маски введення для телефонних номерів і спостереженнями за якістю заявок, що прийшли.

Даний плагін для jQuery дозволяє автоматично підбирати відповідну маску введення на основі введеного початку телефонного номера. Це дозволяє зробити номер телефону на сторінці веб-сайту швидшим і безпомилковим. Крім того, розроблений плагін може бути використаний в інших областях, якщо правила введення можна подати у вигляді кількох масок введення.

Вступ На веб-сайтах дуже потрібне введення інформації про телефонний номер. Так склалося, що кожна країна має право встановлювати свої правила набору та довжину номера, внаслідок чого між жителями різних країн періодично виникає плутанина: одні звикли вказувати номер з провідною цифрою 8, інші – з провідною цифрою 0, а треті – зі знака +. існуючих рішень Щоб якось вирішити складність, що виникла, і привести номери до єдиного формату зустрічаються 3 основні рішення:

Користувачеві пропонується вводити номер за допомогою маски введення. Перевага: відображення номера зводить до мінімуму можливі помилки в номері. Недолік: у кожній країні прийнято своє написання та довжина номера.

Користувачеві пропонується окремо вибирати країну і окремо вводити частину номера, що залишилася; можливо із застосуванням маски введення. Перевага: можливість використання різних масок для різних країн (а також регіонів усередині країни). Недоліки: список країн (і регіонів усередині кожної країни) може бути більшим; номер телефону перестає існувати як єдине ціле (або потрібна передобробка перед збереженням та відображенням номера).

Поставити знак + перед номером (за межами input) та дозволити лише введення цифр. Переваги: простота реалізації. Недолік: відсутність відображення номера.

Пропоноване рішення В результаті було вирішено доопрацювати звичну маску введення так, щоб вона змінювалася відповідно до поточного значення номера. Крім того, у міру введення номера пропонується відображати назву країни, що визначилася. Даний підхід, суб'єктивно, має вирішити всі недоліки перелічених вище рішень.

З урахуванням того, що кількість країн у світі відносно невелика, було прийнято рішення скласти список масок для всіх країн. Як джерело використовувалися відомості, опубліковані на сайті міжнародного союзу електрозв'язку.

Збір цієї інформації зробив чимало сюрпризів. У процесі збору інформації доводилося враховувати всі можливі варіанти телефонних номерів, зокрема у країні. Однак через велику кількість обробленої вручну інформації, можливо, в зібраній базі залишилися неточності. З часом планується вносити виправлення до початкового набору.

Програмна реалізація Як ядро маски введення була використана реалізація jquery.inputmask , про яку багаторазово згадувалося Хабрахабр. Даний плагін зараз активно розвивається і до того ж спроектований таким чином, що для нього досить просто писати розширення. Однак у цій задачі написати таке розширення виявилося практично неможливо. Я став допрацьовувати чи переписувати вихідний плагін під свої потреби, т.к. його автор продовжує активну роботу над розширенням функціоналу, у результаті застосування моїх правок може виявитися проблематичним. Тому мені довелося написати плагін-надбудову над основним ядром, яке відстежує (плюс перехоплює) зовнішні дії та робить модифікацію даних. Для того, щоб впровадити свої обробники зовнішніх впливів до обробників основного плагіна використовувався плагіна-бібліотека jquery.bind-first. При розробці правил сортування було прийнято такі умовності:

Всі символи в масці введення розділені на 2 типи: значущі символи (у моєму випадку це символ # , що означає довільну цифру, цифри 0-9) і символи-декоратори (всі інші).

Інше поділ символів у масці введення - це шаблонні символи (у разі це символ #) і інші.

В результаті вийшли такі правила сортування у порядку їх застосування:

При посимвольному порівнянні 2 масок введення до уваги приймаються лише значні знаки (не декоратори).

Різні шаблонні символи сприймаються як рівні, інші значущі символи порівнюються з урахуванням їх коду.

Нешаблонні символи завжди менші за шаблонні і в результаті розташовуються вище.

Чим коротше довжина значних символів масці введення, тим маска введення вважається менше і розташовується вище.

Пошук відповідної маски введення При порівнянні вхідного тексту з черговою маскою з відсортованого списку беруться до уваги лише значущі символи кожної маски. Якщо рядок виявляється довшим за маску введення, незважаючи на те, що всі попередні символи пройшли перевірку, дана маска введення вважається невідповідною. Якщо вхідному тексту задовольняє кілька масок введення, то повертається перша з них. Далі в знайденій масці всі значущі символи (у тому числі нешаблонні) замінюються на шаблонний, який є комбінацією всіх символів, дозволених будь-яким із шаблонних символів.

keydown - відслідковуються натискання клавіш Backspace та Delete - з метою зміни поточної маски введення перед тим, як основний обробник видаляє один символ з тексту. Крім того, відстежується натискання клавіші Insert, яка змінює режим введення тексту для синхронізації.
keypress - оскільки символ, що вводиться, може бути недозволений оригінальною маскою введення (бо всі значущі символи в ній замінені на шаблонний), потрібно перевірити новий рядок на задоволення однієї з дозволених масок. Якщо таких масок немає, то введення символу відкидається, інакше - проводиться оновлення маски введення, після чого подія передається обробнику ядра.
paste, input - вставка тексту з буфера обміну. Перед передачею обробки ядру проводиться підбір маски для рядка, що вийшла в результаті вставки тексту з буфера обміну. У разі, якщо маску введення підібрати не вдалося, проводиться посимвольне урізання тексту з кінця - до тих пір, поки текст не задовольнятиме хоча б одній масці введення. Аналогічна операція проводиться при виправленні тексту в полі введення викликом функції val(), а також при ініціалізації маски введення, якщо вона застосовується до поля введення.
dragdrop, drop - обробка аналогічна події paste.
blur - додаткова обробка на випадок, якщо увімкнено режим очищення тексту при втраті фокусу, якщо він не задовольняє маску введення. Ця подія перехоплюється після основного обробника, на відміну попередніх.

Всі події навішуються в просторі ввведеннямаск. Це дозволяє уникнути некоректної поведінки при виклику вputmask після ініціалізації надбудови (бо ядро при ініціалізації знімає всі раніше встановлені обробники в просторі inputmask).

Приклад використання Формат списку масок Список масок є JavaScript-масивом об'єктів, переважно з однаковим набором властивостей. Як мінімум одна властивість, яка містить маску введення, має бути присутня у всіх об'єктів масиву. Ім'я параметра, що містить маску, може бути довільним. Нижче наведено фрагмент такого масиву:
[ … ( "mask": "+7(###)###-##-##", "cc": "RU", "name_en": "Russia", "desc_en": "", " name_ua": "Росія", "desc_ua": "" ), ( "mask": "+250(###)###-###", "cc": "RW", "name_en": " Rwanda", "desc_en": "", "name_ru": "Руанда", "desc_ru": "" ), ( "mask": "+966-5-####-####", "cc ": "SA", "name_en": "Saudi Arabia", "desc_en": "mobile", "name_ru": "Саудівська Аравія", "desc_ru": "мобільні" ), ( "mask": "+966- #-###-####", "cc": "SA", "name_en": "Saudi Arabia", "desc_en": "", "name_ru": "Саудівська Аравія", "desc_ru": " " ), … ] Параметри підключення плагіна До підключення потрібно завантажити та відсортувати список масок. Це робиться виконанням наступної функції:
$.masksSort = function(maskList, defs, match, key)

maskList - масив об'єктів, що зберігають маски введення (фрагмент об'єкта див. вище);
defs – масив шаблонних символів (у моєму випадку це символ #);
match - регулярне вираз, що описує значущі символи (у разі це /|#/);
key – ім'я параметра об'єкта масиву, що містить маску введення.

При підключенні плагіну передається спеціальний об'єкт, що описує його роботу. Цей об'єкт містить наступний набір параметрів:

inputmask - об'єкт, що містить параметри, що передаються основному плагіну inputmask;
match - регулярне вираз, що описує значущі символи, крім шаблонних;
replace - шаблонний символ, який замінять всі значущі символи; може бути відсутня в об'єкті визначення об'єкта вputmask;
list – масив об'єктів, що описують маски введення;
listKey – ім'я параметра всередині об'єкта, що зберігає маску введення;
onMaskChange - функція, що викликається при оновленні маски введення; як перший параметр передається об'єкт з масиву, маска введення якого відповідає введеному тексту, а як другий - точність визначення маски: true - маска введення відповідає повністю, false - для достовірного визначення маски потрібно введення додаткових символів.

Для ініціалізації плагіна необхідно застосувати метод введеннямаски до поля введення:
$.fn.inputmasks = function(maskOpts, mode)

maskOpts - об'єкт, що описує роботу плагіна;
mode – необов'язковий; На даний момент підтримується значення isCompleted - в результаті метод повертає true , якщо текст, відповідний відповідній масці, введений повністю і false в іншому випадку.

Приклад підключення плагіна
Маска введення var maskList = $.masksSort($.masksLoad("phone-codes.json"), ["#"], /|#/, "mask"); var maskOpts = ( inputmask: ( definitions: ( "#": ( validator: "", cardinality: 1 ) ), //clearIncomplete: true, showMaskOnHover: false, autoUnmask: true ), match://, replace: "# ", list: maskList, listKey: "mask", onMaskChange: function(maskObj, completed) ( if (completed) ( var hint = maskObj.name_ru; if (maskObj.desc_ru && maskObj.desc_ru != "") ( hint + = "(" + maskObj.desc_uk + ")"; ) $("#descr").html(hint); ) else ( $("#descr").html("Маска введення"); ) $(this ).attr("placeholder", $(this).inputmask("getemptymask")); ) ); $("#phone_mask").change(function() ( if ($("#phone_mask").is(":checked")) ( $("#customer_phone").inputmasks(maskOpts); ) else ( $ ("#customer_phone").inputmask("+[###################]], maskOpts.inputmask) .attr("placeholder", $("# customer_phone").inputmask("getemptymask")); $("#descr").html("Маска введення"); ) )); $("#phone_mask").change(); Демонстрація Приклад демонстрації розробленого плагіна представлений на

Вибір редакції