Tento plugin pre jQuery umožňuje automaticky vybrať vhodnú vstupnú masku na základe zadaného začiatku telefónneho čísla. To vám umožní rýchlejšie a bezchybnejšie zadávanie telefónneho čísla na webovú stránku. Okrem toho je možné vyvinutý plug-in použiť aj v iných oblastiach, ak je možné zadávacie pravidlá reprezentovať vo forme niekoľkých vstupných masiek.

Úvod

Na webových stránkach je veľmi potrebné zadať informácie o telefónnom čísle. Stalo sa tak, že každá krajina má právo stanoviť si vlastné pravidlá vytáčania a dĺžku čísla, v dôsledku čoho medzi obyvateľmi rozdielne krajiny pravidelne dochádza k zámene: niektoré sa zvyknú označovať číslo s úvodnou číslicou 8, iné s úvodnou číslicou 0 a iné so znamienkom +.

Preskúmanie existujúcich riešení

Aby sme nejako vyriešili vzniknutú zložitosť a priviedli čísla do jedného formátu, existujú 3 hlavné riešenia:

1. Používateľ je vyzvaný na zadanie čísla pomocou vstupnej masky. Výhoda: prehľadné zobrazenie čísla minimalizuje možné chyby čísel. Nevýhoda: každá krajina má svoj vlastný pravopis a dĺžku čísla.
2. Používateľ je vyzvaný, aby samostatne vybral krajinu a samostatne zadal zvyšok čísla; prípadne pomocou vstupnej masky. Výhoda: možnosť používať rôzne vstupné masky pre rôzne krajiny (ako aj regióny v rámci krajiny). Nevýhody: Zoznam krajín (a regiónov v rámci každej krajiny) môže byť veľký; telefónne číslo prestane existovať ako celok (alebo je potrebné predbežné spracovanie pred uložením a zobrazením čísla).
3. Umiestnite znak + pred číslo (mimo vstupu) a povoľte zadávanie iba čísel. Výhody: jednoduchá implementácia. Nevýhoda: nedostatok vizuálneho zobrazenia čísla.

Navrhnuté riešenie

V dôsledku toho bolo rozhodnuté upraviť obvyklú vstupnú masku tak, aby sa menila v súlade s aktuálnou hodnotou čísla. Okrem toho sa pri zadávaní čísla zobrazí výzva na zobrazenie názvu definovanej krajiny. Tento prístup, subjektívne musí vyriešiť všetky nevýhody vyššie uvedených riešení.

Vzhľadom na skutočnosť, že počet krajín na svete je relatívne malý, bolo rozhodnuté zostaviť zoznam vstupných masiek pre všetky krajiny. Ako zdroj boli použité informácie zverejnené na stránke Medzinárodnej telekomunikačnej únie.

Zhromažďovanie týchto informácií prinieslo množstvo prekvapení. V procese zberu informácií bolo potrebné vziať do úvahy všetky možné možnosti telefónne čísla vrátane v rámci krajiny. Avšak vzhľadom na Vysoké číslo ručne spracované informácie, je možné, že v zozbieranej databáze zostali nepresnosti. Plánuje sa, že v priebehu času dôjde k opravám pôvodnej zostavy.

Softvérová implementácia

Ako jadro vstupnej masky bola použitá implementácia jquery.inputmask, ktorá bola na Habrahabr mnohokrát spomínaná. Tento plugin je teraz aktívne vyvíjaný a navyše je navrhnutý tak, že je pre neho celkom jednoduché písať rozšírenia. V tejto úlohe sa však ukázalo, že napísať takéto rozšírenie je takmer nemožné. Pôvodný plugin som neupravoval ani neprepisoval tak, aby vyhovoval mojim potrebám jeho autor naďalej aktívne pracuje na rozširovaní funkcionality, v dôsledku čoho sa aplikácia mojich úprav môže ukázať ako problematická. Preto som musel nad hlavné jadro napísať doplnkový plugin, ktorý sleduje (plus zachytáva) vonkajšie vplyvy a robí úpravy dát. Za účelom implementácie vašich manipulátorov vonkajšie vplyvy pred hlavnými obslužnými programami pluginov bola použitá knižnica pluginov jquery.bind-first.

Triedenie povolených vstupných masiek

Pre správny výber najvhodnejšej vstupnej masky je potrebné celú sadu masiek špeciálnym spôsobom triediť. Pri vývoji pravidiel triedenia boli prijaté tieto konvencie:

1. Všetky znaky vo vstupnej maske sú rozdelené do 2 typov: významné symboly(v mojom prípade je to symbol #, čo znamená ľubovoľnú číslicu a čísla 0-9) a symboly dekoratérov (všetky ostatné).
2. Ďalším rozdelením znakov vo vstupnej maske sú zástupné znaky (v mojom prípade je to symbol #) a všetky ostatné.

Výsledkom sú nasledujúce pravidlá triedenia v poradí, v akom sú aplikované:

1. Pri porovnávaní 2 vstupných masiek znak po znaku sa berú do úvahy iba zmysluplné znaky (nie dekoratéri).
2. Rôzne zástupné znaky sa považujú za rovnaké a ostatné významné znaky sa porovnávajú na základe ich kódu.
3. Symboly bez šablóny sú vždy menšie ako symboly šablóny, a preto sú umiestnené vyššie.
4. Čím kratšia je dĺžka významných znakov vo vstupnej maske, tým je vstupná maska ​​menšia a vyššia.

Nájdenie vhodnej vstupnej masky

Pri porovnávaní vstupného textu s ďalšou maskou zo zoradeného zoznamu sa berú do úvahy iba významné znaky každej masky. Ak je reťazec dlhší ako vstupná maska, hoci všetky predchádzajúce znaky boli overené, vstupná maska ​​sa považuje za neplatnú. Ak niekoľko vstupných masiek vyhovuje vstupnému textu, vráti sa prvá z nich. Ďalej, v nájdenej maske sú všetky významné symboly (vrátane nešablónových) nahradené vzorovým, čo je kombinácia všetkých symbolov povolených ktorýmkoľvek zo symbolov šablóny.

Spracovanie a zachytávanie udalostí

Aby sa predišlo konfliktom s obsluhou udalostí hlavného jadra vstupnej masky, zachytia sa nasledujúce udalosti:

• keydown- Monitorujú sa stlačenia kláves Backspace a Delete - aby sa zmenila aktuálna vstupná maska ​​predtým, ako hlavný obslužný program odstráni jeden znak z textu. Okrem toho sa sleduje stlačenie klávesu Insert, ktorý mení režim zadávania textu, kvôli synchronizácii.
• stlačenie klávesy- keďže zadaný znak nemusí byť rozlíšený pôvodnou vstupnou maskou (keďže všetky významné znaky v nej sú nahradené šablónou), je potrebné skontrolovať Nový riadok vyhovieť jednej z povolených masiek. Ak neexistujú žiadne takéto masky, potom sa znakový vstup zahodí, inak sa vstupná maska ​​aktualizuje, po čom sa udalosť odovzdá obsluhe jadra.
• prilepiť, vstup- vkladanie textu zo schránky. Pred prenosom spracovania do jadra sa pre riadok vyberie vstupná maska, ktorá bola získaná v dôsledku vloženia textu zo schránky. Ak nebolo možné nájsť vstupnú masku, text sa od konca znak po znaku orezáva, kým text nespĺňa aspoň jednu vstupnú masku. Podobná operácia sa vykoná pri oprave textu vo vstupnom poli volaním funkcie val (), ako aj pri inicializácii vstupnej masky, ak sa aplikuje na neprázdne vstupné pole.
• Chyť pusti, pokles- spracovanie je podobné ako v prípade prilepenia.
• rozmazať - dodatočné spracovanie v prípade, že je povolený režim vymazania textu pri strate zaostrenia, ak nevyhovuje vstupnej maske. Táto udalosť je zachytená za hlavným handlerom, na rozdiel od predchádzajúcich.

Všetky udalosti sú zavesené v priestore vstupnej masky. Tým sa zabráni nesprávnemu správaniu pri volaní inputmask po inicializácii doplnku (keďže jadro počas inicializácie odstráni všetky predtým nainštalované handlery v priestore inputmask).

Príklad použitia

Formát zoznamu masiek

Zoznam masiek je pole objektov JavaScriptu, pokiaľ možno s rovnakou sadou vlastností. Všetky objekty v poli musia mať aspoň jednu vlastnosť, ktorá obsahuje vstupnú masku. Názov parametra obsahujúceho masku môže byť ľubovoľný. Nižšie je uvedený fragment takéhoto poľa:
[… ("Maska": "+7 (###) ### - ## - ##", "cc": "RU", "name_en": "Rusko", "desc_en": "", " name_ru ":" Rusko "," desc_ru ":" "), (" maska ​​":" +250 (###) ### - ### "," cc ":" RW "," name_sk ":" Rwanda "," desc_en ":" "," name_ru ":" Rwanda "," desc_ru ":" "), (" maska ​​":" + 966-5 - #### - #### "," cc ":" SA "," name_en ":" Saudská Arábia "," desc_en ":" mobile "," name_ru ":" Saudská Arábia "," desc_ru ":" mobile "), (" maska ​​":" + 966- # - ### - #### "," cc ":" SA "," name_sk ":" Saudská Arábia "," desc_sk ":" "," name_ru ":" Saudská Arábia "," desc_sk ":" "), ...]

Parametre pripojenia pluginu

Pred pripojením je potrebné načítať a triediť zoznam masiek. To sa vykonáva vykonaním nasledujúcej funkcie:
$ .masksSort = funkcia (maskList, defs, match, key)

• maskList- pole objektov uchovávajúcich vstupné masky (fragment objektu pozri vyššie);
• defs- pole symbolov šablóny (v mojom prípade je to symbol #);
• zápas- regulárny výraz popisujúci významné znaky (v mojom prípade je to / | # /);
• kľúč- názov parametra objektu poľa obsahujúceho vstupnú masku.

Po pripojení sa do pluginu odovzdá špeciálny objekt, ktorý popisuje jeho prácu. Tento objekt obsahuje nasledujúcu sadu parametrov:

• vstupná maska- objekt obsahujúci parametre odovzdané hlavnej vstupnej maske zásuvného modulu;
• zápas- regulárny výraz popisujúci významné znaky, s výnimkou šablón;
• nahradiť- symbol šablóny, ktorý bude nahradený všetkými významnými symbolmi; nemusí byť prítomný v objekte definícií objektu inputmask;
• zoznam- pole objektov popisujúcich vstupné masky;
• listKey- názov parametra vnútri objektu, ktorý ukladá vstupnú masku;
• onMaskChange- funkcia, ktorá sa volá pri aktualizácii vstupnej masky; ako prvý parameter sa odovzdá objekt z poľa, ktorého vstupná maska ​​zodpovedá zadanému textu a ako druhý je presnosť definície masky: true - vstupná maska ​​sa úplne zhoduje, false - sú potrebné ďalšie znaky na spoľahlivé určenie masky.

Ak chcete inicializovať doplnok, musíte na vstupné pole použiť metódu inputmasks:
$ .fn.inputmasks = funkcia (maskOpts, režim)

• maskOpts- objekt popisujúci prácu pluginu;
• režim- voliteľné; v v súčasnosti hodnota isCompleted je podporovaná – výsledkom je, že metóda vráti hodnotu true, ak je text zodpovedajúci zodpovedajúcej maske úplne zadaný, a v opačnom prípade vráti hodnotu false.

Príklad zapojenia pluginu

Vstupná maska

Demonštrácia

Príklad ukážky vyvinutého pluginu je uvedený na

Na prvý pohľad je odpoveď zrejmá: označte pole „telefónne číslo“ ako požadované. Existujú však výklenky, v ktorých môže používateľ opustiť stránku kvôli nepotrebným povinným poliam. Napríklad aplikácie, softvér, stránky na predaj obsahu. Čísla používateľov pre takéto projekty sú však dôležité ako dodatočné údaje, ktoré umožňujú interakciu s potenciálnymi zákazníkmi v budúcnosti. Navyše existuje jednoduché a efektívne riešenie - pomocou vstupnej masky. Dokážme to prípadovými štúdiami.

Prečo potrebujete vstupnú masku?

Vstupná maska ​​ukazuje, v akom formáte je potrebné zadať údaje do poľa. Ak napríklad používateľ zadá telefónne číslo bez predvoľby alebo telefónne číslo do poľa adresy, nebude môcť prejsť na ďalšiu položku. Maska vo formulároch poskytuje jednotný vzhľad vstupných údajov, čo uľahčuje vyhľadávanie a správu databázy. V odporúčaniach Netpeak je maska ​​na zadanie telefónneho čísla povinným prvkom objednávkového formulára na webovej stránke. Ako každé praktické odporúčanie našich špecialistov, aj táto pozícia je založená na úspešných prípadoch klientov.

Keďže sa stránka špecializovala na aplikácie, pole na zadanie čísla na stránke bolo nepovinné. Na sledovanie zmeny percenta zákazníkov vypĺňajúcich pole „telefón“ v objednávkovom formulári na stránke sme použili vlastnú premennú v Google Analytics... Vo februári ani jeden z deviatich zákazníkov nevyplnil pole „telefón“. V marci sme predstavili vstupnú masku a používatelia ju začali vypĺňať. Kvôli čistote experimentu bolo pole ponechané ako voliteľné a neboli vykonané žiadne ďalšie zmeny.
Výsledok za marec – 19 vydaní s 22 používateľmi, ktorí vyplnili prihlášku. Inými slovami, 85 % používateľov, ktorí si aplikáciu objednali, zanechalo svoje telefónne číslo.

Prípadová štúdia webu informačného centra: zvýšenie počtu vyplnení poľa telefónne číslo o 15,4 %.

Stránka klienta sa zaoberá písaním esejí, semestrálnych prác, diplomových prác a iných prác. Na komunikáciu je žiaduce telefónne číslo používateľa, ale na stránke bolo toto pole nepovinné. Používateľ nemohol vyplniť formulár ani nič napísať do tohto poľa. Rovnako ako prvýkrát, v prvej fáze sme nainštalovali sledovanie vyplnenia poľa „telefón“ v Google Analytics. V novembri z 59 žiadostí návštevníkov stránky 15 neobsahovalo čísla. To znamená, že spoločnosť dostala len 74,6 % zaslaných formulárov s vyplneným číslom. Potom sme do poľa telefónu pridali vstupnú masku. V decembri stránka prijala 60 žiadostí. Len 6 vyplnených formulárov však neobsahovalo telefónne číslo klienta. Následne 90% odoslaných objednávkových formulárov obsahovalo správne vyplnené pole „telefón“. Za mesiac - nárast o 15,4%, len vďaka zavedeniu masky na zadávanie čísel. Nakoniec - interný prípad agentúry.

Pole pre čísla v objednávkovom formulári na stránke Netpeak je tiež voliteľné. Telefónne čísla sú však dôležité preto, aby zákazníci vždy poznali číslo a stav svojej aplikácie (tieto údaje posielame cez SMS), ako aj pre optimalizáciu práce account manažérov. Doba experimentu, ako v predchádzajúcich príkladoch, je dva mesiace. V dôsledku vzniku masky na zadávanie čísel sa percento vypĺňania formulárov zvýšilo zo 44% na 83% - o 39,4%.
Po experimente sme na stránku implementovali masku. Pole na zadanie čísla zostáva nepovinné. Žiadosť neprejde iba vtedy, ak je v tomto poli zadané nesprávne číslo. V tomto prípade sa prvé číslice v maske menia v závislosti od krajiny, v ktorej sa používateľ stránky nachádza. Ak sa bavíme o predobjednávkovom formulári, tak je zaujímavé vedieť, o koľko lepšia je aplikácia s telefónnymi číslami. Vzali sme všetky aplikácie, ktoré kedy boli prijaté prostredníctvom predobjednávkového formulára, a vypočítali sme percento tých, ktoré prešli na zákazníkov bez čísla as ním. Tá sa ukázala najviac o 0,81 %.

Výkon: ak vám osoba vo formulári zanechá svoje číslo, nie je to zárukou prevodu finančných prostriedkov.

Ak hovoríme o forme predobjednávky, v popredí je možnosť opätovnej aktivácie zákazníkov, teda možnosti, ktoré sa otvárajú obchodníkom vyzbrojeným základňou osobných telefónnych čísel používateľov. O úspešných prípadoch reaktivácie vám povieme v jednom z nových príspevkov. Medzitým vám odporúčame prečítať si o opatreniach, ktoré je potrebné prijať pred akýmikoľvek akciami s telefónnymi číslami v databáze. Podeľte sa v komentároch o svoje skúsenosti s implementáciou vstupnej masky pre telefónne čísla a sledovaním kvality prichádzajúcich požiadaviek.