Форма за обратна връзка с маска за въвеждане. Маскиране и валидиране на телефонното поле с помощта на jQuery. Пример за свързване на плъгин
Този плъгин jQuery ви позволява автоматично да изберете подходящата маска за въвеждане въз основа на въведеното начало на телефонния номер. Това ви позволява да направите въвеждането на телефонен номер на страница на уебсайт по-бързо и без грешки. В допълнение, разработеният плъгин може да се използва в други области, ако правилата за въвеждане могат да бъдат представени под формата на няколко маски за въвеждане.
Въведение Уеб сайтовете изискват въвеждане на информация за телефонен номер. Така се случва, че всяка страна има право да установи свои собствени правила за набиране и дължина на номера, в резултат на което периодично възниква объркване между жителите на различни страни: някои са свикнали да посочват номера с водеща цифра 8, други с водеща цифра 0, а други със знак + Преглед на съществуващите решения За да разрешите по някакъв начин сложността и да приведете числата в унифициран формат, има 3 основни решения:Като се има предвид фактът, че броят на държавите в света е сравнително малък, беше решено да се състави списък с маски за въвеждане за всички държави. За източник е използвана информация, публикувана на сайта на Международния съюз по телекомуникации.
Събирането на тази информация донесе много изненади. В процеса на събиране на информация беше необходимо да се вземат предвид всички възможни варианти за телефонни номера, включително в страната. Въпреки това, поради голямото количество ръчно обработена информация, е възможно да са останали неточности в събраната база данни. Предвижда се с течение на времето да се правят корекции на оригиналния комплект.
Софтуерна реализация Реализацията на jquery.inputmask, която беше спомената много пъти на Habrahabr, беше използвана като ядро на маската за въвеждане. Този плъгин в момента се разработва активно и освен това е проектиран по такъв начин, че е доста лесно да се пишат разширения за него. В този проблем обаче се оказа почти невъзможно да се напише такова разширение. Не модифицирах или пренаписах оригиналния плъгин, за да отговаря на нуждите ми, защото... неговият автор продължава активно да работи върху разширяването на функционалността, в резултат на което прилагането на моите редакции може да бъде проблематично. Следователно трябваше да напиша добавка за приставка върху основното ядро, която следи (плюс прихваща) външни влияния и прави модификации на данните. За да приложим нашите собствени манипулатори за външни влияния преди манипулаторите на основния плъгин, ние използвахме плъгина за библиотека jquery.bind-first. сортирани по специален начин. При разработването на правила за сортиране бяха приети следните конвенции:Резултатът е следните правила за сортиране в реда, в който са приложени:
- keydown - натисканията на клавиши backspace и delete се наблюдават, за да се промени текущата маска за въвеждане, преди основният манипулатор да премахне един знак от текста. Освен това натискането на клавиша Insert, което променя режима на въвеждане на текст, се следи за синхронизация.
- натискане на клавиш - тъй като въведеният символ може да не е разрешен от оригиналната маска за въвеждане (тъй като всички значими знаци в него са заменени с заместващ знак), е необходимо да се провери дали новият ред отговаря на една от разрешените маски. Ако няма такива маски, тогава въведеният знак се отхвърля; в противен случай маската за въвеждане се актуализира, след което събитието се предава на манипулатора на ядрото.
- паста , въвеждане - поставяне на текст от клипборда. Преди да прехвърлите обработката към ядрото, се избира входна маска за низа, получен в резултат на поставяне на текст от клипборда. Ако маската за въвеждане не може да бъде намерена, текстът се изрязва символ по знак от края, докато текстът съответства на поне една маска за въвеждане. Подобна операция се извършва при коригиране на текст в поле за въвеждане чрез извикване на функцията val(), както и при инициализиране на маска за въвеждане, ако тя е приложена към непразно поле за въвеждане.
- dragdrop , drop - обработката е подобна на събитието paste.
- размазване - допълнителна обработка в случай, че режимът за изчистване на текст е активиран при загуба на фокус, ако не отговаря на маската за въвеждане. Това събитие се прихваща след основния манипулатор, за разлика от предишните.
Всички събития са окачени в пространството на входната маска. Това избягва неправилно поведение при извикване на inputmask след инициализиране на добавката (тъй като ядрото премахва всички предварително инсталирани манипулатори в пространството inputmask при инициализация).
Пример за използване Формат на списък маска Списъкът маска е JavaScript масив от обекти, за предпочитане със същия набор от свойства. Поне едно свойство, което съдържа входна маска, трябва да присъства за всички масивни обекти. Името на параметъра, съдържащ маската, може да бъде произволно. По-долу е даден фрагмент от такъв масив:[ … ( "mask": "+7(###)###-##-##", "cc": "RU", "name_en": "Русия", "desc_en": "", " name_ru": "Русия", "desc_ru": "" ), ( "mask": "+250(###)###-###", "cc": "RW", "name_en": " Руанда", "desc_en": "", "name_ru": "Руанда", "desc_ru": "" ), ( "mask": "+966-5-####-####", "cc ": "SA", "name_en": "Саудитска Арабия", "desc_en": "мобилен", "name_ru": "Саудитска Арабия", "desc_ru": "мобилен"), ( "mask": "+966- #-###-####", "cc": "SA", "name_en": "Саудитска Арабия", "desc_en": "", "name_ru": "Саудитска Арабия", "desc_ru": " " ), … ] Параметри за свързване на плъгин Преди да се свържете, трябва да заредите и сортирате списъка с маски. Това става чрез изпълнение на следната функция:
$.masksSort = функция (maskList, defs, match, key)
- maskList - масив от обекти, съхраняващи маски за въвеждане (фрагмент на обект вижте по-горе);
- defs - масив от заместващи знаци (в моя случай това е символът #);
- match - регулярен израз, описващ значими знаци (в моя случай това е /|#/);
- key е името на обектния параметър на масива, съдържащ входната маска.
Когато е свързан, плъгинът получава специален обект, който описва работата му. Този обект съдържа следния набор от параметри:
- inputmask - обект, съдържащ параметри, предадени на основния плъгин inputmask;
- съвпадение - регулярен израз, описващ значими символи, с изключение на заместващи знаци;
- replace - заместващ знак, към който ще бъдат заменени всички значими знаци; може да не присъства в дефинициите обект на inputmask обект;
- списък - масив от обекти, описващи входни маски;
- listKey - име на параметъра в обекта, съхраняващ входната маска;
- onMaskChange - функция, която се извиква при актуализиране на входната маска; първият параметър е обект от масива, чиято входна маска съответства на въведения текст, а вторият параметър е точността на дефиницията на маската: true - входната маска съвпада напълно, false - трябва да бъдат въведени допълнителни знаци, за да е надеждно дефинирайте маската.
За да инициализирате приставката, трябва да приложите метода inputmasks към полето за въвеждане:
$.fn.inputmasks = функция (maskOpts, режим)
- maskOpts - обект, описващ работата на плъгина;
- режим - по желание; в момента се поддържа стойността isCompleted - в резултат на това методът връща true, ако текстът, съответстващ на съвпадащата маска, е въведен напълно и false в противен случай.
Маска за въвеждане var maskList = $.masksSort($.masksLoad("phone-codes.json"), ["#"], /|#/, "mask"); var maskOpts = ( inputmask: ( дефиниции: ( "#": ( validator: "", cardinality: 1)), //clearIncomplete: true, showMaskOnHover: false, autoUnmask: true), match: //, replace: "# ", списък: maskList, listKey: "маска", onMaskChange: функция(maskObj, завършен) ( if (завършен) ( var hint = maskObj.name_ru; if (maskObj.desc_ru && maskObj.desc_ru != "") ( hint + = " (" + maskObj.desc_ru + ")"; ) $("#descr").html(подсказка); ) else ( $("#descr").html("Маска за въвеждане"); ) $(това ).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").промяна(); Демонстрация Пример за демонстрация на разработения плъгин е представен на
На пръв поглед отговорът е очевиден: маркирайте полето „телефонен номер“, както е необходимо. Но има ниши, в които потребителят може да напусне сайта поради ненужни задължителни полета. Например приложения, софтуер, сайтове за продажба на съдържание. Потребителските номера за такива проекти обаче са важни като допълнителни данни, които правят възможно взаимодействието с потенциални клиенти в бъдеще. Освен това има просто и ефективно решение - използване на маска за въвеждане. Нека докажем това със случаи.
Защо ви е необходима маска за въвеждане?Маската за въвеждане показва в какъв формат трябва да въведете данните в полето. Например, ако потребител въведе телефонен номер без областен код или телефонен номер в адресното поле, той няма да може да премине към следващия елемент. Маската във формуляри осигурява еднакъв вид на въведените данни, което улеснява търсенето и управлението на базата данни. Според препоръките на Netpeak маската за въвеждане на телефонен номер е задължителен елемент от формата за поръчка на уебсайта. Като всяка практическа препоръка от нашите специалисти, тази разпоредба се основава на успешни случаи на клиенти.
Тъй като сайтът е специализиран в приложения, полето за въвеждане на номер в сайта не е задължително. За да проследим промените в процента клиенти, които попълват полето „телефон“ на формуляра за поръчка на сайта, използвахме персонализирана променлива в Google Analytics. През февруари нито един от деветте клиенти не е попълнил полето „телефон“. През март въведохме маска за въвеждане и потребителите започнаха да я попълват. За чистотата на експеримента полето беше оставено незадължително и не бяха направени други промени.
Резултатът за март беше 19 броя с 22 потребители, попълнили приложението. С други думи, 85% от потребителите, поръчали приложението, са оставили своя телефонен номер.
Уебсайтът на клиента предоставя услуги за писане на есета, курсови работи, дисертации и други произведения. Телефонният номер на потребителя е желателен за комуникация, но в сайта това поле не е задължително. Потребителят не можа да попълни формуляра или да напише нещо в това поле. Както за първи път, на първия етап настроихме проследяване за попълване на полето „телефон“ в Google Analytics. През ноември от 59 приложения, оставени от посетители на сайта, 15 не съдържат номера. Тоест компанията е получила само 74,6% от подадените формуляри с попълнен брой. След това добавихме маска за въвеждане към полето за телефон. През декември в сайта са постъпили 60 заявления. Освен това само 6 попълнени формуляра не съдържат телефонен номер на клиента. Следователно 90% от изпратените формуляри за поръчки съдържаха правилно попълнено поле за телефон. За месеца - увеличение от 15,4%, само благодарение на въвеждането на маска за въвеждане на номера. И накрая, вътрешен казус на агенцията.
Полето за номера във формата за поръчка в сайта на Netpeak също не е задължително. Но телефонните номера са важни, за да могат клиентите винаги да знаят номера и статуса на своята заявка (изпращаме тези данни чрез SMS), както и за оптимизиране на работата на акаунт мениджърите. Периодът на експеримента, както в предишните примери, е два месеца. В резултат на появата на маската за въвеждане на цифри процентът на попълнените формуляри нараства от 44% на 83% - с 39,4%.
След експеримента внедрихме маската на сайта. Полето за въвеждане на номер остава незадължително. Заявлението няма да бъде обработено само ако в това поле е въведен грешен номер. В този случай първите цифри в маската се променят в зависимост от държавата, в която се намира потребителят на сайта. Ако говорим за форма за предварителна поръчка, тогава е интересно да разберем колко по-качествени са приложенията с телефонни номера. Взехме всички потенциални клиенти, получени някога чрез формата за предварителна поръчка, и изчислихме процента на тези, които са се превърнали в клиенти без и с номер. Последните се оказват най-много с 0,81%.
Заключение: ако човек ви остави своя номер във формуляра, това не гарантира прехвърлянето на средства.
Ако говорим за формата за предварителна поръчка, възможностите за повторно активиране на клиенти излизат на преден план, възможности, които се отварят за търговците, въоръжени с база данни с лични телефонни номера на потребителите. Ще говорим за успешни случаи на повторно активиране в една от новите ни публикации. Междувременно ви съветваме да прочетете за мерките, които трябва да предприемете, преди да предприемете действия с телефонни номера в базата данни. Споделете в коментарите вашия опит с прилагането на маска за въвеждане на телефонни номера и вашите наблюдения върху качеството на входящите приложения.
Този плъгин jQuery ви позволява автоматично да изберете подходящата маска за въвеждане въз основа на въведеното начало на телефонния номер. Това ви позволява да направите въвеждането на телефонен номер на страница на уебсайт по-бързо и без грешки. В допълнение, разработеният плъгин може да се използва в други области, ако правилата за въвеждане могат да бъдат представени под формата на няколко маски за въвеждане.
Въведение Уеб сайтовете изискват въвеждане на информация за телефонен номер. Така се случва, че всяка страна има право да установи свои собствени правила за набиране и дължина на номера, в резултат на което периодично възниква объркване между жителите на различни страни: някои са свикнали да посочват номера с водеща цифра 8, други с водеща цифра 0, а други със знак + Преглед на съществуващите решения За да разрешите по някакъв начин сложността и да приведете числата в унифициран формат, има 3 основни решения:Като се има предвид фактът, че броят на държавите в света е сравнително малък, беше решено да се състави списък с маски за въвеждане за всички държави. За източник е използвана информация, публикувана на сайта на Международния съюз по телекомуникации.
Събирането на тази информация донесе много изненади. В процеса на събиране на информация беше необходимо да се вземат предвид всички възможни варианти за телефонни номера, включително в страната. Въпреки това, поради голямото количество ръчно обработена информация, е възможно да са останали неточности в събраната база данни. Предвижда се с течение на времето да се правят корекции на оригиналния комплект.
Софтуерна реализация Реализацията на jquery.inputmask, която беше спомената много пъти на Habrahabr, беше използвана като ядро на маската за въвеждане. Този плъгин в момента се разработва активно и освен това е проектиран по такъв начин, че е доста лесно да се пишат разширения за него. В този проблем обаче се оказа почти невъзможно да се напише такова разширение. Не модифицирах или пренаписах оригиналния плъгин, за да отговаря на нуждите ми, защото... неговият автор продължава активно да работи върху разширяването на функционалността, в резултат на което прилагането на моите редакции може да бъде проблематично. Следователно трябваше да напиша добавка за приставка върху основното ядро, която следи (плюс прихваща) външни влияния и прави модификации на данните. За да приложим нашите собствени манипулатори за външни влияния преди манипулаторите на основния плъгин, ние използвахме плъгина за библиотека jquery.bind-first. сортирани по специален начин. При разработването на правила за сортиране бяха приети следните конвенции:Резултатът е следните правила за сортиране в реда, в който са приложени:
- keydown - натисканията на клавиши backspace и delete се наблюдават, за да се промени текущата маска за въвеждане, преди основният манипулатор да премахне един знак от текста. Освен това натискането на клавиша Insert, което променя режима на въвеждане на текст, се следи за синхронизация.
- натискане на клавиш - тъй като въведеният символ може да не е разрешен от оригиналната маска за въвеждане (тъй като всички значими знаци в него са заменени с заместващ знак), е необходимо да се провери дали новият ред отговаря на една от разрешените маски. Ако няма такива маски, тогава въведеният знак се отхвърля; в противен случай маската за въвеждане се актуализира, след което събитието се предава на манипулатора на ядрото.
- паста , въвеждане - поставяне на текст от клипборда. Преди да прехвърлите обработката към ядрото, се избира входна маска за низа, получен в резултат на поставяне на текст от клипборда. Ако маската за въвеждане не може да бъде намерена, текстът се изрязва символ по знак от края, докато текстът съответства на поне една маска за въвеждане. Подобна операция се извършва при коригиране на текст в поле за въвеждане чрез извикване на функцията val(), както и при инициализиране на маска за въвеждане, ако тя е приложена към непразно поле за въвеждане.
- dragdrop , drop - обработката е подобна на събитието paste.
- размазване - допълнителна обработка в случай, че режимът за изчистване на текст е активиран при загуба на фокус, ако не отговаря на маската за въвеждане. Това събитие се прихваща след основния манипулатор, за разлика от предишните.
Всички събития са окачени в пространството на входната маска. Това избягва неправилно поведение при извикване на inputmask след инициализиране на добавката (тъй като ядрото премахва всички предварително инсталирани манипулатори в пространството inputmask при инициализация).
Пример за използване Формат на списък маска Списъкът маска е JavaScript масив от обекти, за предпочитане със същия набор от свойства. Поне едно свойство, което съдържа входна маска, трябва да присъства за всички масивни обекти. Името на параметъра, съдържащ маската, може да бъде произволно. По-долу е даден фрагмент от такъв масив:[ … ( "mask": "+7(###)###-##-##", "cc": "RU", "name_en": "Русия", "desc_en": "", " name_ru": "Русия", "desc_ru": "" ), ( "mask": "+250(###)###-###", "cc": "RW", "name_en": " Руанда", "desc_en": "", "name_ru": "Руанда", "desc_ru": "" ), ( "mask": "+966-5-####-####", "cc ": "SA", "name_en": "Саудитска Арабия", "desc_en": "мобилен", "name_ru": "Саудитска Арабия", "desc_ru": "мобилен"), ( "mask": "+966- #-###-####", "cc": "SA", "name_en": "Саудитска Арабия", "desc_en": "", "name_ru": "Саудитска Арабия", "desc_ru": " " ), … ] Параметри за свързване на плъгин Преди да се свържете, трябва да заредите и сортирате списъка с маски. Това става чрез изпълнение на следната функция:
$.masksSort = функция (maskList, defs, match, key)
- maskList - масив от обекти, съхраняващи маски за въвеждане (фрагмент на обект вижте по-горе);
- defs - масив от заместващи знаци (в моя случай това е символът #);
- match - регулярен израз, описващ значими знаци (в моя случай това е /|#/);
- key е името на обектния параметър на масива, съдържащ входната маска.
Когато е свързан, плъгинът получава специален обект, който описва работата му. Този обект съдържа следния набор от параметри:
- inputmask - обект, съдържащ параметри, предадени на основния плъгин inputmask;
- съвпадение - регулярен израз, описващ значими символи, с изключение на заместващи знаци;
- replace - заместващ знак, към който ще бъдат заменени всички значими знаци; може да не присъства в дефинициите обект на inputmask обект;
- списък - масив от обекти, описващи входни маски;
- listKey - име на параметъра в обекта, съхраняващ входната маска;
- onMaskChange - функция, която се извиква при актуализиране на входната маска; първият параметър е обект от масива, чиято входна маска съответства на въведения текст, а вторият параметър е точността на дефиницията на маската: true - входната маска съвпада напълно, false - трябва да бъдат въведени допълнителни знаци, за да е надеждно дефинирайте маската.
За да инициализирате приставката, трябва да приложите метода inputmasks към полето за въвеждане:
$.fn.inputmasks = функция (maskOpts, режим)
- maskOpts - обект, описващ работата на плъгина;
- режим - по желание; в момента се поддържа стойността isCompleted - в резултат на това методът връща true, ако текстът, съответстващ на съвпадащата маска, е въведен напълно и false в противен случай.
Маска за въвеждане var maskList = $.masksSort($.masksLoad("phone-codes.json"), ["#"], /|#/, "mask"); var maskOpts = ( inputmask: ( дефиниции: ( "#": ( validator: "", cardinality: 1)), //clearIncomplete: true, showMaskOnHover: false, autoUnmask: true), match: //, replace: "# ", списък: maskList, listKey: "маска", onMaskChange: функция(maskObj, завършен) ( if (завършен) ( var hint = maskObj.name_ru; if (maskObj.desc_ru && maskObj.desc_ru != "") ( hint + = " (" + maskObj.desc_ru + ")"; ) $("#descr").html(подсказка); ) else ( $("#descr").html("Маска за въвеждане"); ) $(това ).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").промяна(); Демонстрация Пример за демонстрация на разработения плъгин е представен на