Maska telefónneho čísla v javafx. Maskovanie a overenie telefónneho poľa pomocou jQuery

Tento jQuery plugin 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ý plugin použiť aj v iných oblastiach, ak môžu byť vstupné pravidlá reprezentované vo forme niekoľkých vstupných masiek.

Úvod Webové stránky vyžadujú zadanie informácií o telefónnom čísle. Stáva sa, že každá krajina má právo zaviesť svoje vlastné pravidlá vytáčania a dĺžku čísla, v dôsledku čoho medzi obyvateľmi rôznych krajín pravidelne dochádza k zámene: niektorí sú zvyknutí uvádzať číslo s úvodnou číslicou 8, iní s úvodnou číslicou. číslica 0 a ešte ďalšie so znamienkom +. Preskúmať existujúce riešenia Ak chcete nejako vyriešiť zložitosť a uviesť čísla do jednotného formátu, existujú 3 hlavné riešenia:

Používateľ je vyzvaný na zadanie čísla pomocou vstupnej masky. Výhoda: Prehľadné zobrazenie čísla minimalizuje možné chyby v čísle. Nevýhoda: každá krajina má svoj vlastný pravopis a dĺžku čísla.

Používateľ je vyzvaný, aby vybral krajinu samostatne a zvyšok čísla zadal samostatne; možné 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 jeden celok (alebo je pred uložením a zobrazením čísla potrebné predbežné spracovanie).

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.

Navrhované riešenie Výsledkom bolo rozhodnutie 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 identifikovanej krajiny. Tento prístup by mal subjektívne vyriešiť všetky nedostatky 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.

Zber týchto informácií priniesol mnohé prekvapenia. V procese zhromažďovania informácií bolo potrebné vziať do úvahy všetky možné možnosti telefónnych čísel, a to aj v rámci krajiny. Vzhľadom na veľké množstvo manuálne spracovaných informácií je však možné, že v zozbieranej databáze zostali nepresnosti. Plánuje sa, že časom 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 mnohokrát spomínaná na Habrahabr. Tento plugin sa v súčasnosti aktívne vyvíja a navyše je navrhnutý tak, aby sa preňho písali rozšírenia celkom jednoducho. V tomto probléme sa však ukázalo takmer nemožné napísať takéto rozšírenie. Pôvodný plugin som neupravoval ani neprepisoval tak, aby vyhovoval mojim potrebám, pretože... jeho autor naďalej aktívne pracuje na rozširovaní funkcionality, v dôsledku čoho môže byť aplikácia mojich úprav problematická. Preto som musel nad hlavné jadro napísať zásuvný doplnok, ktorý sleduje (plus zachytáva) vonkajšie vplyvy a robí úpravy dát. Aby sme pred handlery hlavného pluginu implementovali vlastné handlery pre vonkajšie vplyvy, použili sme knižničný plugin jquery.bind-first Triedenie povolených vstupných masiek Pre správny výber najvhodnejšej vstupnej masky je potrebné najprv celú sadu masiek triedené špeciálnym spôsobom. Pri vývoji pravidiel triedenia boli prijaté tieto konvencie:

Všetky znaky vo vstupnej maske sú rozdelené do 2 typov: významné znaky (v mojom prípade je to symbol #, čo znamená ľubovoľné číslo a čísla 0-9) a ozdobné znaky (všetky ostatné).

Ď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é:

Pri porovnávaní 2 vstupných masiek znak po znaku sa berú do úvahy iba významné znaky (nie dekoratéri).

Rôzne zástupné znaky sa považujú za rovnaké a ostatné významné znaky sa porovnávajú na základe ich kódu.

Symboly bez šablóny sú vždy menšie ako symboly šablóny a v dôsledku toho sú umiestnené vyššie.

Čím kratšia je dĺžka významných znakov vo vstupnej maske, tým menšia je vstupná maska a je umiestnená vyššie.

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 riadok dlhší ako vstupná maska, hoci všetky predchádzajúce znaky prešli testom, vstupná maska sa považuje za neplatnú. Ak sa vstupný text zhoduje s viacerými vstupnými maskami, vráti sa prvá. Ďalej sú v nájdenej maske všetky významné znaky (vrátane nešablónových) nahradené šablónou, ktorá je kombináciou všetkých znakov povolených ktorýmkoľvek zo symbolov šablóny Spracovanie a zachytenie udalostí Aby sa predišlo konfliktom s obsluhy udalostí hlavného jadra vstupnej masky sú zachytené nasledujúce udalosti:

keydown - stlačenie klávesov Backspace a delete sa monitoruje, aby sa zmenila aktuálna vstupná maska predtým, ako hlavný obslužný program odstráni jeden znak z textu. Okrem toho sa kontroluje synchronizácia stlačenia klávesu Insert, ktorý zmení režim zadávania textu.
stlačenie klávesu - keďže zadaný znak nemusí byť povolený pôvodnou vstupnou maskou (keďže všetky významné znaky v nej sú nahradené zástupným znakom), je potrebné skontrolovať nový riadok, aby vyhovoval jednej z povolených masiek. Ak takéto masky neexistujú, vstupný znak sa zahodí; v opačnom prípade sa vstupná maska aktualizuje, po čom sa udalosť odovzdá obsluhe jadra.
vložiť , vstup - vložiť text zo schránky. Pred prenosom spracovania do jadra sa pre reťazec, ktorý je výsledkom prilepenia textu zo schránky, vyberie vstupná maska. Ak nie je možné nájsť vstupnú masku, text sa orezáva znak po znaku od konca, kým sa text nezhoduje s aspoň jednou vstupnou maskou. 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.
dragdrop , spracovanie poklesu je podobné udalosti prilepenia.
rozostrenie - dodatočné spracovanie v prípade, že je povolený režim vymazania textu pri strate zamerania, ak nevyhovuje vstupnej maske. Táto udalosť je na rozdiel od predchádzajúcich zachytená za hlavným handlerom.

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 pri inicializácii odstráni všetky predtým nainštalované obslužné programy v priestore inputmask).

Príklad použitia Formát zoznamu masiek Zoznam masiek je pole objektov JavaScriptu, pokiaľ možno s rovnakou sadou vlastností. Pre všetky objekty poľa musí byť prítomná aspoň jedna 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": "mobil", "name_ru": "Saudská Arábia", "desc_ru": "mobil" ), ( "maska": "+966- #-###-####", "cc": "SA", "name_en": "Saudská Arábia", "desc_en": "", "name_ru": "Saudská Arábia", "desc_ru": " " ), … ] Parametre pripojenia pluginu Pred pripojením je potrebné načítať a triediť zoznam masiek. To sa vykonáva vykonaním nasledujúcej funkcie:
$.masksSort = function(maskList, defs, match, key)

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

Po pripojení dostane plugin špeciálny objekt, ktorý popisuje jeho fungovanie. Tento objekt obsahuje nasledujúcu sadu parametrov:

inputmask - objekt obsahujúci parametre odovzdané hlavnému doplnku inputmask;
match - regulárny výraz popisujúci významné znaky, s výnimkou zástupných znakov;
nahradiť - zástupný znak, ktorým budú nahradené všetky významné znaky; nemusí byť prítomný v objekte definícií objektu inputmask;
zoznam - pole objektov popisujúcich vstupné masky;
listKey - názov parametra vnútri objektu uchovávajúceho vstupnú masku;
onMaskChange - funkcia, ktorá sa volá pri aktualizácii vstupnej masky; prvým parametrom je objekt z poľa, ktorého vstupná maska zodpovedá zadávanému textu a druhým parametrom je presnosť definície masky: true - vstupná maska sa úplne zhoduje, false - je potrebné zadať ďalšie znaky, aby sa spoľahlivo definujte masku.

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

maskOpts - objekt popisujúci činnosť pluginu;
režim - voliteľný; v súčasnosti je podporovaná hodnota isCompleted - v dôsledku toho metóda vráti hodnotu true, ak je text zodpovedajúci zodpovedajúcej maske zadaný úplne a v opačnom prípade je hodnota false.

Príklad pripojenia pluginu
Vstupná maska var maskList = $.masksSort($.masksLoad("phone-codes.json"), ["#"], /|#/, "mask"); var maskOpts = ( inputmask: ( definície: ( "#": ( validator: "", mohutnosť: 1) ) ), //clearIncomplete: true, showMaskOnHover: false, autoUnmask: true ), match: //, nahradiť: "# ", list: maskList, listKey: "mask", onMaskChange: function(maskObj, complete) ( if (completed) ( var hint = maskObj.name_ru; if (maskObj.desc_ru && maskObj.desc_ru != "") ( hint + = " (" + maskObj.desc_ru + ")"; ) $("#descr").html(tip); ) else ( $("#descr").html("Vstupná maska"); ) $(toto ).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("Vstupná maska"); ) )); $("#maska_telefónu").zmena(); Ukážka 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 zbytočný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 klientmi v budúcnosti. Navyše existuje jednoduché a efektívne riešenie - pomocou vstupnej masky. Dokážme to prípadmi.

Prečo potrebujete vstupnú masku?

Vstupná maska zobrazuje, v akom formáte je potrebné zadať údaje do poľa. Ak napríklad používateľ zadá do poľa adresy telefónne číslo bez predvoľby alebo telefónneho čísla, nebude môcť prejsť na ďalšiu položku. Maska vo formulároch poskytuje jednotný vzhľad zadávaných údajov, čo zjednodušuje vyhľadávanie a správu databázy. Podľa odporúčaní Netpeaku 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 od našich špecialistov, aj toto ustanovenie 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 voliteľné. Na sledovanie zmien percenta zákazníkov vypĺňajúcich pole „telefón“ v objednávkovom formulári na stránke sme použili vlastnú premennú v službe 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ýsledkom za marec bolo 19 vydaní s 22 používateľmi, ktorí vyplnili žiadosť. Inými slovami, 85 % používateľov, ktorí si aplikáciu objednali, zanechalo svoje telefónne číslo.

Prípadová štúdia webovej stránky informačného centra: zvýšenie počtu záznamov v poli telefónne číslo o 15,4 %

Webová stránka klienta poskytuje služby na písanie esejí, ročníkových prác, dizertácií 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. Prvýkrát sme v prvej fáze nastavili sledovanie pre vyplnenie poľa „telefón“ v Google Analytics. V novembri z 59 žiadostí, ktoré zanechali návštevníci stránky, 15 neobsahovalo čísla. To znamená, že spoločnosť dostala len 74,6 % odoslaných formulárov s vyplneným počtom. Potom sme do poľa telefónu pridali vstupnú masku. V decembri stránka prijala 60 žiadostí. Navyše len 6 vyplnených formulárov neobsahovalo telefónne číslo klienta. V dôsledku toho 90 % odoslaných objednávkových formulárov obsahovalo správne vyplnené telefónne pole. Medzimesačne - nárast o 15,4%, len vďaka zavedeniu masky na zadávanie čísel. Na záver interná prípadová štúdia 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é, aby klienti vždy poznali číslo a stav svojej žiadosti (tieto údaje posielame cez SMS), ako aj optimalizáciu práce account manažérov. Doba experimentu, ako v predchádzajúcich príkladoch, je dva mesiace. V dôsledku objavenia sa masky na zadávanie čísel sa percento vyplnených formulárov zvýšilo zo 44 % na 83 % – o 39,4 %.
Po experimente sme masku implementovali na stránku. Pole na zadanie čísla zostáva nepovinné. Žiadosť nebude spracovaná iba v prípade nesprávneho zadania čísla v tomto poli. 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 kvalitnejšie sú aplikácie s telefónnymi číslami. Zobrali sme všetkých potenciálnych zákazníkov, ktorí sme kedy dostali prostredníctvom predobjednávkového formulára, a vypočítali percento tých, ktorí sa premenili na zákazníkov bez čísla a s číslom. Tá sa ukázala najviac o 0,81 %.

Záver: ak vám niekto zanechá svoje číslo vo formulári, nezaručuje to prevod finančných prostriedkov.

Ak hovoríme o predobjednávkovom formulári, do popredia sa dostávajú možnosti reaktivácie zákazníkov, príležitosti, ktoré sa otvárajú pre obchodníkov vyzbrojených databázou osobných telefónnych čísel používateľov. O úspešných prípadoch reaktivácie si povieme v jednom z našich nových príspevkov. Dovtedy 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 vaše skúsenosti s implementáciou vstupnej masky pre telefónne čísla a vaše postrehy ku kvalite prichádzajúcich aplikácií.