Jak zadat telefonní číslo do formuláře. Maskování a ověřování telefonního pole pomocí jQuery. Vytvoření vstupní masky HTML

Tento plugin jQuery umožňuje automaticky vybrat vhodnou vstupní masku na základě zadaného začátku telefonního čísla. Díky tomu je zadávání telefonního čísla na webové stránce rychlejší a bez chyb. Kromě toho lze vyvinutý plugin použít v jiných oblastech, pokud lze vstupní pravidla reprezentovat ve formě několika vstupních masek.

Úvod Webové stránky vyžadují zadání informací o telefonním čísle. Stává se, že každá země má právo stanovit si vlastní pravidla vytáčení a délku čísla, v důsledku čehož mezi obyvateli různých zemí pravidelně dochází k záměně: někteří jsou zvyklí označovat číslo úvodní číslicí 8, jiní úvodní číslicí číslice 0 a ještě další se znaménkem + Přezkoumat existující řešení Abychom nějak vyřešili složitost a dostali čísla do jednotného formátu, existují 3 hlavní řešení:

Uživatel je vyzván k zadání čísla pomocí vstupní masky. Výhoda: Přehledné zobrazení čísla minimalizuje možné chyby v čísle. Nevýhoda: každá země má svůj vlastní pravopis a délku čísla.

Uživatel je požádán, aby samostatně vybral zemi a samostatně zadal zbytek čísla; možné pomocí vstupní masky. Výhoda: možnost používat různé vstupní masky pro různé země (a také regiony v rámci země). Nevýhody: seznam zemí (a regionů v každé zemi) může být velký; telefonní číslo přestane existovat jako jeden celek (nebo je před uložením a zobrazením čísla vyžadováno předběžné zpracování).

Umístěte znaménko + před číslo (mimo vstup) a povolte zadávat pouze čísla. Výhody: snadná implementace. Nevýhoda: nedostatek vizuálního zobrazení čísla.

Návrh řešení V důsledku toho bylo rozhodnuto upravit obvyklou vstupní masku tak, aby se měnila v souladu s aktuální hodnotou čísla. Kromě toho budete při zadávání čísla vyzváni k zobrazení názvu identifikované země. Tento přístup by měl subjektivně vyřešit všechny nedostatky výše uvedených řešení.

S ohledem na skutečnost, že počet zemí na světě je relativně malý, bylo rozhodnuto sestavit seznam vstupních masek pro všechny země. Jako zdroj byly použity informace zveřejněné na stránkách Mezinárodní telekomunikační unie.

Sběr těchto informací přinesl mnohá překvapení. V procesu shromažďování informací bylo nutné vzít v úvahu všechny možné varianty telefonních čísel, a to i v rámci země. Vzhledem k velkému množství ručně zpracovávaných informací je však možné, že ve shromážděné databázi zůstaly nepřesnosti. V průběhu času se plánuje provést opravy původní sady.

Softwarová implementace Jako jádro vstupní masky byla použita implementace jquery.inputmask, která byla na Habrahabru mnohokrát zmíněna. Tento plugin je v současné době aktivně vyvíjen a navíc je navržen tak, aby pro něj bylo celkem snadné psát rozšíření. V tomto problému se však ukázalo téměř nemožné takové rozšíření napsat. Původní plugin jsem neupravoval ani nepřepisoval, aby vyhovoval mým potřebám, protože... jeho autor nadále aktivně pracuje na rozšiřování funkcionality, v důsledku čehož může být aplikace mých úprav problematická. Musel jsem proto nad hlavní jádro napsat plug-in doplněk, který hlídá (a navíc zachycuje) vnější vlivy a provádí úpravy dat. Abychom implementovali naše handlery externího vlivu před handlery hlavního pluginu, použili jsme plugin knihovny jquery.bind-first Třídění povolených vstupních masek Pro správný výběr nejvhodnější vstupní masky je třeba celou sadu masek nejprve roztřídit ve speciálním cesta. Při vývoji třídicích pravidel byly přijaty následující konvence:

Všechny znaky ve vstupní masce jsou rozděleny do 2 typů: významné znaky (v mém případě je to symbol #, což znamená libovolné číslo a čísla 0-9) a ozdobné znaky (všechny ostatní).

Dalším rozdělením znaků ve vstupní masce jsou zástupné znaky (v mém případě se jedná o symbol #) a všechny ostatní.

Výsledkem jsou následující pravidla řazení v pořadí, v jakém jsou použita:

Při porovnávání 2 vstupních masek znak po znaku se berou v úvahu pouze významné znaky (nikoli dekorátoři).

Různé zástupné znaky jsou považovány za rovnocenné a ostatní významné znaky jsou porovnávány na základě jejich kódu.

Symboly bez šablony jsou vždy menší než symboly šablony a v důsledku toho jsou umístěny výše.

Čím kratší je délka významných znaků ve vstupní masce, tím menší je vstupní maska považována a umístěna výše.

Nalezení vhodné vstupní masky Při porovnávání vstupního textu s další maskou ze seřazeného seznamu se berou v úvahu pouze významné znaky každé masky. Pokud je řádek delší než vstupní maska, přestože všechny předchozí znaky prošly testem, vstupní maska se považuje za neplatnou. Pokud se vstupní text shoduje s několika vstupními maskami, vrátí se první. Dále jsou v nalezené masce všechny významné znaky (včetně nešablonových) nahrazeny šablonovým, což je kombinace všech znaků povolených kterýmkoli ze symbolů šablony Zpracování a zachycení událostí Aby se předešlo konfliktům s obsluhy událostí hlavního jádra vstupní masky jsou zachyceny následující události:

keydown - úhozy kláves Backspace a delete jsou monitorovány, aby se změnila aktuální vstupní maska, než hlavní obslužná rutina odstraní jeden znak z textu. Kromě toho je sledována synchronizace stisknutí klávesy Insert, která změní režim zadávání textu.
stisknutí klávesy - protože zadaný znak nemusí být povolen původní vstupní maskou (protože všechny významné znaky v ní jsou nahrazeny zástupným znakem), je nutné zkontrolovat nový řádek, aby vyhovoval jedné z povolených masek. Pokud žádné takové masky neexistují, vstup znaků je zahozen, v opačném případě je vstupní maska aktualizována, načež je událost předána obsluze jádra.
vložit , vstup - vložit text ze schránky. Před přenosem zpracování do jádra se vybere vstupní maska pro řetězec vzniklý vložením textu ze schránky. Pokud vstupní masku nelze nalézt, text se ořezává znak po znaku od konce, dokud text neodpovídá alespoň jedné vstupní masce. Podobná operace se provádí při opravě textu ve vstupním poli voláním funkce val() a také při inicializaci vstupní masky, pokud je aplikována na neprázdné vstupní pole.
dragdrop, drop-processing je podobný události paste.
rozostření - dodatečné zpracování v případě, že je povolen režim mazání textu při ztrátě fokusu, pokud nevyhovuje vstupní masce. Tato událost je zachycena po hlavním handleru, na rozdíl od předchozích.

Všechny události jsou zavěšeny v prostoru inputmask. Tím se zabrání nesprávnému chování při volání inputmask po inicializaci doplňku (protože jádro při inicializaci odstraní všechny dříve nainstalované handlery v prostoru inputmask).

Příklad použití Formát seznamu masek Seznam masek je pole objektů JavaScriptu, nejlépe se stejnou sadou vlastností. Pro všechny objekty pole musí být přítomna alespoň jedna vlastnost, která obsahuje vstupní masku. Název parametru obsahujícího masku může být libovolný. Níže je fragment takového pole:
[ … ( "maska": "+7(###)###-##-##", "cc": "RU", "name_en": "Rusko", "desc_en": "", " name_ru": "Rusko", "desc_ru": "" ), ( "maska": "+250(###)###-###", "cc": "RW", "name_en": " Rwanda", "desc_en": "", "name_ru": "Rwanda", "desc_ru": "" ), ( "maska": "+966-5-####-####", "cc ": "SA", "name_en": "Saúdská Arábie", "desc_en": "mobile", "name_ru": "Saúdská Arábie", "desc_ru": "mobile" ), ( "maska": "+966- #-###-####", "cc": "SA", "name_en": "Saúdská Arábie", "desc_en": "", "name_ru": "Saúdská Arábie", "desc_ru": " " ), … ] Parametry připojení pluginu Před připojením je třeba načíst a seřadit seznam masek. To se provádí provedením následující funkce:
$.masksSort = function(maskList, defs, match, key)

maskList - pole objektů ukládající vstupní masky (objektový fragment viz výše);
defs - pole zástupných znaků (v mém případě je to symbol #);
match - regulární výraz popisující významné znaky (v mém případě je to /|#/);
key je název parametru objektu pole obsahujícího vstupní masku.

Po připojení dostane plugin speciální objekt, který popisuje jeho činnost. Tento objekt obsahuje následující sadu parametrů:

inputmask - objekt obsahující parametry předané do hlavního pluginu inputmask;
match - regulární výraz popisující významné znaky, s výjimkou zástupných znaků;
nahradit - zástupný znak, kterým budou nahrazeny všechny významné znaky; nemusí být přítomen v objektu definice objektu inputmask;
seznam - pole objektů popisujících vstupní masky;
listKey - název parametru uvnitř objektu ukládajícího vstupní masku;
onMaskChange - funkce, která je volána při aktualizaci vstupní masky; prvním parametrem je objekt z pole, jehož vstupní maska odpovídá zadanému textu a druhým parametrem je přesnost definice masky: true - vstupní maska se zcela shoduje, false - je nutné zadat další znaky, aby bylo možné spolehlivě definovat masku.

Chcete-li inicializovat plugin, musíte na vstupní pole použít metodu inputmasks:
$.fn.inputmasks = function(maskOpts, mode)

maskOpts - objekt popisující činnost pluginu;
režim - volitelný; aktuálně je podporována hodnota isCompleted - v důsledku toho metoda vrátí hodnotu true, pokud je text odpovídající odpovídající masce zadán celý a v opačném případě nepravda.

Příklad připojení pluginu
Vstupní maska var maskList = $.masksSort($.masksLoad("phone-codes.json"), ["#"], /|#/, "mask"); var maskOpts = ( inputmask: ( definice: ( "#": ( validator: "", mohutnost: 1) ) ), //clearIncomplete: true, showMaskOnHover: false, autoUnmask: true ), match: //, nahradit: "# ", list: maskList, listKey: "mask", onMaskChange: function(maskObj, dokončeno) ( if (completed) ( var hint = maskObj.name_ru; if (maskObj.desc_ru && maskObj.desc_ru != "") ( hint + = " (" + maskObj.desc_ru + ")"; ) $("#descr").html(nápověda); ) 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_telefonu").change(); Ukázka Příklad ukázky vyvinutého pluginu je uveden na

Odpověď je na první pohled zřejmá: označte pole „telefonní číslo“ jako požadované. Existují však výklenky, ve kterých může uživatel opustit web kvůli zbytečným povinným polím. Například aplikace, software, stránky pro prodej obsahu. Čísla uživatelů pro takové projekty jsou však důležitá jako doplňková data, která umožňují v budoucnu komunikovat s potenciálními klienty. Navíc existuje jednoduché a efektivní řešení - pomocí vstupní masky. Pojďme to dokázat na případech.

Proč potřebujete vstupní masku?

Vstupní maska ukazuje, v jakém formátu je třeba zadat data do pole. Pokud například uživatel zadá do pole adresy telefonní číslo bez předčíslí nebo telefonního čísla, nebude moci přejít na další položku. Maska ve formulářích poskytuje jednotný vzhled zadávaných údajů, což zjednodušuje vyhledávání a správu databáze. Podle doporučení Netpeak je maska pro zadání telefonního čísla povinným prvkem objednávkového formuláře na webu. Jako každé praktické doporučení od našich specialistů je toto ustanovení založeno na úspěšných případech klientů.

Protože se stránka specializovala na aplikace, pole pro zadání čísla na stránce bylo volitelné. Ke sledování změn v procentu zákazníků, kteří vyplnili pole „telefon“ v objednávkovém formuláři na webu, jsme použili vlastní proměnnou v Google Analytics. V únoru žádný z devíti zákazníků nevyplnil pole „telefon“. V březnu jsme představili vstupní masku a uživatelé ji začali vyplňovat. Pro čistotu experimentu bylo pole ponecháno volitelné a nebyly provedeny žádné další změny.
Výsledkem za březen bylo 19 vydání s 22 uživateli, kteří vyplnili přihlášku. Jinými slovy, 85 % uživatelů, kteří si aplikaci objednali, zanechalo své telefonní číslo.

Případová studie webu informačního centra: nárůst počtu záznamů v poli telefonní číslo o 15,4 %

Web klienta poskytuje služby pro psaní esejů, kurzů, dizertací a dalších prací. Telefonní číslo uživatele je žádoucí pro komunikaci, ale na webu bylo toto pole nepovinné. Uživatel nemohl vyplnit formulář ani nic napsat do tohoto pole. Jako poprvé jsme v první fázi nastavili sledování pro vyplnění pole „telefon“ v Google Analytics. V listopadu z 59 přihlášek zanechaných návštěvníky stránek 15 neobsahovalo čísla. To znamená, že společnost obdržela pouze 74,6 % odeslaných formulářů s vyplněným číslem. Poté jsme přidali vstupní masku do pole telefonu. V prosinci stránka přijala 60 žádostí. Navíc pouze 6 vyplněných formulářů neobsahovalo telefonní číslo klienta. V důsledku toho 90 % odeslaných objednávkových formulářů obsahovalo správně vyplněné telefonní pole. Meziměsíčně - nárůst o 15,4 %, pouze díky zavedení masky pro zadávání čísel. Na závěr interní případová studie agentury.

Pole pro čísla v objednávkovém formuláři na webu Netpeak je také nepovinné. Telefonní čísla jsou ale důležitá, aby klienti vždy znali číslo a stav své žádosti (tato data zasíláme SMS zprávou), a také pro optimalizaci práce account managerů. Doba experimentu, stejně jako v předchozích příkladech, je dva měsíce. V důsledku zobrazení masky pro zadávání čísel se procento vyplněných formulářů zvýšilo ze 44 % na 83 % – o 39,4 %.
Po experimentu jsme masku implementovali na web. Pole pro zadání čísla zůstává nepovinné. Žádost nebude zpracována pouze v případě, že do tohoto pole bude zadáno nesprávné číslo. V tomto případě se první číslice v masce mění v závislosti na zemi, ve které se uživatel webu nachází. Pokud se bavíme o předobjednávkovém formuláři, pak je zajímavé vědět, o kolik kvalitnější jsou aplikace s telefonními čísly. Vzali jsme všechny potenciální zákazníky, které jsme kdy obdrželi prostřednictvím předobjednávkového formuláře, a vypočítali procento těch, kteří se proměnili v zákazníky bez čísla a s číslem. Ta se ukázala být nejvíce o 0,81 %.

Závěr: pokud vám někdo na formuláři zanechá své číslo, nezaručuje to převod finančních prostředků.

Pokud mluvíme o předobjednávkovém formuláři, do popředí se dostávají možnosti reaktivace zákazníků, příležitosti, které se otevírají obchodníkům vyzbrojeným databází osobních telefonních čísel uživatelů. O úspěšných případech reaktivace budeme hovořit v jednom z našich nových příspěvků. Mezitím vám doporučujeme, abyste si přečetli o opatřeních, která je třeba učinit před jakoukoli akcí s telefonními čísly v databázi. Podělte se v komentářích o své zkušenosti s implementací vstupní masky pro telefonní čísla a své postřehy ke kvalitě příchozích aplikací.