Ovaj jQuery dodatak vam omogućava da automatski odaberete odgovarajuću masku za unos na osnovu unesenog početka telefonskog broja. Ovo vam omogućava da unošenje telefonskog broja na web stranicu učinite bržim i bez grešaka. Osim toga, razvijeni dodatak može se koristiti u drugim područjima, ako se pravila unosa mogu predstaviti kao nekoliko ulaznih maski.

Uvod

Web stranice zahtijevaju unos informacija o broju telefona. Tako se dogodilo da svaka zemlja ima pravo da uspostavi svoja pravila biranja i dužinu broja, usled čega između stanovnika različite zemlje s vremena na vrijeme nastaje zabuna: neki su navikli označavati broj s početnom cifrom 8, drugi s početnom cifrom 0, a treći znakom +.

Pregled postojećih rješenja

Kako bismo nekako riješili nastalu poteškoću i doveli brojeve u jedan format, postoje 3 glavna rješenja:

1. Od korisnika se traži da unese broj koristeći masku za unos. Prednost: jasan prikaz broja minimizira moguće greške u broju. Nedostatak: svaka država ima svoj pravopis i dužinu broja.
2. Od korisnika se traži da posebno odabere državu i zasebno unese ostatak broja; moguće korištenje maske za unos. Prednost: Mogućnost korištenja različitih maski za unos za različite zemlje (kao i regije unutar zemlje). Nedostaci: Lista zemalja (i regiona unutar svake zemlje) može biti duga; telefonski broj prestaje postojati kao cjelina (ili je potrebna prethodna obrada prije snimanja i prikaza broja).
3. Stavite znak + ispred broja (izvan unosa) i dozvolite unos samo cifara. Prednosti: jednostavnost implementacije. Nedostatak: nedostatak vizuelnog prikaza broja.

Predloženo rješenje

Kao rezultat toga, odlučeno je da se modificira uobičajena ulazna maska ​​tako da se mijenja u skladu s trenutnom vrijednošću broja. Osim toga, dok unosite broj, predlaže se da se prikaže naziv određene zemlje. Ovaj pristup, subjektivno, treba riješiti sve nedostatke gore navedenih rješenja.

S obzirom da je broj zemalja u svijetu relativno mali, odlučeno je da se sastavi lista ulaznih maski za sve zemlje. Kao izvor korištene su informacije objavljene na web stranici Međunarodne unije za telekomunikacije.

Prikupljanje ovih informacija donijelo je mnoga iznenađenja. U procesu prikupljanja informacija bilo je potrebno uzeti u obzir sve moguće opcije brojevi telefona, uključujući i unutar zemlje. Međutim, s obzirom na veliki broj ručno obrađene informacije, moguće je da su u prikupljenoj bazi podataka ostale netočnosti. Vremenom se planira izvršiti korekcije početnog skupa.

Implementacija softvera

Implementacija jquery.inputmask je korištena kao jezgro maske za unos, što je više puta spominjano na Habrahabru. Ovaj dodatak se trenutno aktivno razvija i, osim toga, dizajniran je na takav način da je dovoljno jednostavno napisati ekstenzije za njega. Međutim, pokazalo se da je u ovom problemu gotovo nemoguće napisati takvo proširenje. Nisam mijenjao ili prepisivao originalni dodatak za svoje potrebe, jer. njegov autor nastavlja aktivno raditi na proširenju funkcionalnosti, zbog čega primjena mojih izmjena može biti problematična. Zbog toga sam morao da napišem plug-in add-on preko glavnog jezgra, koji prati (plus presreće) spoljne uticaje i modifikuje podatke. Da biste ubrizgali svoje rukovaoce spoljni uticaji prije rukovatelja glavnog dodatka, korištena je biblioteka dodataka jquery.bind-first.

Sortiranje dozvoljenih ulaznih maski

Da biste ispravno odabrali najprikladniju ulaznu masku, cijeli skup maski se prvo mora sortirati na poseban način. Prilikom izrade pravila sortiranja usvojene su sljedeće konvencije:

1. Svi znakovi u maski za unos podijeljeni su u 2 tipa: značajni likovi(u mom slučaju, ovo je simbol #, što znači proizvoljan broj, i brojevi 0-9) i dekorater znakovi (sve ostalo).
2. Druga podjela znakova u maski za unos su šablonski znakovi (u mom slučaju to je znak #) i sve ostalo.

Rezultat su sljedeća pravila sortiranja, redoslijedom kojim se primjenjuju:

1. Prilikom upoređivanja 2 ulazne maske znak po znak, uzimaju se u obzir samo značajni znakovi (ne dekoratori).
2. Različiti znakovi uzorka se tretiraju kao jednaki, a drugi značajni znakovi se upoređuju na osnovu njihovog koda.
3. Znakovi koji nisu uzorci su uvijek manji od znakova uzorka i kao rezultat toga su postavljeni više.
4. Što je kraća dužina značajnih znakova u ulaznoj maski, to je manja ulazna maska ​​i veća je.

Potražite odgovarajuću masku za unos

Prilikom upoređivanja ulaznog teksta sa sljedećom maskom iz sortirane liste, uzimaju se u obzir samo značajni znakovi svake maske. Ako je niz duži od ulazne maske, iako su svi prethodni znakovi prošli test, tada se ulazna maska ​​smatra nevažećom. Ako unosni tekst zadovoljava nekoliko ulaznih maski, onda se vraća prva. Nadalje, u pronađenoj maski, svi značajni znakovi (uključujući one koji nisu šabloni) zamjenjuju se šablonskim, koji je kombinacija svih znakova koje dozvoljava bilo koji od šablonskih znakova.

Rukovanje i presretanje događaja

Kako bi se spriječili sukobi s rukovaocima događaja glavnog motora maske ulaza, presreću se sljedeći događaji:

• keydown- prate se tasteri Backspace i Delete - da bi se promenila trenutna maska ​​unosa pre nego što glavni rukovalac izbriše jedan znak iz teksta. Osim toga, sinhronizacija se prati pritiskom na tipku Insert, koja mijenja način unosa teksta.
• pritiskom na taster- budući da ulazni znak možda nije dozvoljen originalnom maskom za unos (jer su svi značajni znakovi u njemu zamijenjeni šablonom), morate provjeriti nova linija da zadovolji jednu od dozvoljenih maski. Ako nema takvih maski, tada se unos karaktera odbacuje, u suprotnom, ulazna maska ​​se ažurira, nakon čega se događaj prenosi na kernel handler.
• paste, unos- zalijepite tekst iz međuspremnika. Prije prosljeđivanja obrade u kernel, bira se ulazna maska ​​za string koji je rezultat lijepljenja teksta iz međuspremnika. Ako se ulazna maska ​​ne može odabrati, tekst se skraćuje znak po znak od kraja - sve dok tekst ne zadovolji barem jednu masku unosa. Slična operacija se izvodi pri ispravljanju teksta u polju za unos pozivanjem funkcije val(), kao i pri inicijalizaciji maske unosa, ako se primjenjuje na neprazno polje za unos.
• drag-drop, drop- obrada je slična događaju lijepljenja.
• zamućenje - dodatna obrada u slučaju da je režim brisanja teksta omogućen pri gubitku fokusa, ako ne zadovoljava masku unosa. Ovaj događaj se hvata nakon glavnog rukovaoca, za razliku od prethodnih.

Svi događaji su okačeni u prostor ulazne maske. Ovim se izbjegava nepravilno ponašanje pri pozivanju maske za unos nakon što je dodatak inicijaliziran (jer kernel uklanja sve prethodno instalirane rukovaoce u prostoru ulazne maske tokom inicijalizacije).

Primjer upotrebe

Format liste maski

Lista maski je JavaScript niz objekata, po mogućnosti sa istim skupom svojstava. Najmanje jedno svojstvo koje sadrži ulaznu masku mora biti prisutno na svim objektima niza. Naziv parametra koji sadrži masku može biti proizvoljan. Ispod je fragment takvog niza:
[ … ( "maska": "+7(###)###-##-##", "cc": "RU", "name_en": "Rusija", "desc_en": "", " name_ru": "Rusija", "desc_ru": "" ), ( "maska": "+250(###)###-###", "cc": "RW", "name_en": " Ruanda", "desc_en": "", "name_ru": "Ruanda", "desc_ru": "" ), ( "maska": "+966-5-####-####", "cc ": "SA", "name_en": "Saudijska Arabija", "desc_en": "mobilni", "name_ru": "Saudijska Arabija", "desc_ru": "mobilni" ), ( "maska": "+966- #-###-####", "cc": "SA", "name_en": "Saudijska Arabija", "desc_en": "", "name_ru": "Saudijska Arabija", "desc_ru": " "), …]

Opcije povezivanja dodataka

Prije povezivanja morate preuzeti i sortirati listu maski. To se radi izvršavanjem sljedeće funkcije:
$.masksSort = funkcija (maskList, defs, match, key)

• maskList- niz objekata koji pohranjuju ulazne maske (vidi gore za fragment objekta);
• defs- niz šablonskih znakova (u mom slučaju, ovo je simbol #);
• match- regularni izraz koji opisuje značajne znakove (u mom slučaju to je /|#/);
• ključ- naziv parametra objekta niza koji sadrži ulaznu masku.

Kada se poveže, dodatku se prosljeđuje poseban objekt koji opisuje njegov rad. Ovaj objekat sadrži sljedeći skup parametara:

• maska ​​za unos- objekat koji sadrži parametre prosleđene glavnom dodatku maske za unos;
• match- regularni izraz koji opisuje značajne znakove, osim šablonskih;
• zamijeniti- šablonski znak, koji će biti zamijenjen svim značajnim znakovima; možda neće biti prisutan u objektu definicija objekta inputmask;
• lista- niz objekata koji opisuju ulazne maske;
• listKey- naziv parametra unutar objekta koji pohranjuje ulaznu masku;
• onMaskChange- funkcija koja se poziva prilikom ažuriranja ulazne maske; kao prvi parametar se prosljeđuje objekt iz niza čija ulazna maska ​​odgovara unesenom tekstu, a kao drugi - tačnost definicije maske: true - ulazna maska ​​se u potpunosti poklapa, false - potrebni su dodatni znakovi za pouzdano određivanje maske.

Da biste inicijalizirali dodatak, morate primijeniti metodu inputmasks na polje za unos:
$.fn.inputmasks = funkcija (maskOpts, mod)

• maskOpts- objekat koji opisuje rad dodatka;
• način rada- opciono; in trenutno vrijednost isCompleted je podržana - kao rezultat, metoda vraća true ako je tekst koji odgovara odgovarajućoj maski unesen u potpunosti i false u suprotnom.

Primjer povezivanja dodataka

maska ​​za unos

Demonstracija

Primjer demonstracije razvijenog dodatka je prikazan na

Na prvi pogled odgovor je očigledan: označite polje "telefonski broj" kao potrebno. Ali postoje niše u kojima korisnik može napustiti stranicu zbog dodatnih obaveznih polja. Na primjer, aplikacije, softver, web stranice koje prodaju sadržaj. Međutim, korisnički brojevi za takve projekte su važni kao dodatni podaci koji omogućavaju interakciju s potencijalnim kupcima u budućnosti. Štaviše, postoji jednostavno i efikasno rešenje - upotreba maske za unos. Dokažimo to slučajevima.

Zašto nam je potrebna maska ​​za unos?

Maska za unos označava format u kojem se podaci trebaju unijeti u polje. Na primjer, ako korisnik unese broj telefona bez pozivnog broja ili telefonskog broja u polje za adresu, neće moći prijeći na sljedeću stavku. Maska obrasca pruža ujednačen prikaz ulaznih podataka, što pojednostavljuje pretragu i upravljanje bazom podataka. U preporukama Netpeaka, maska ​​za unos broja telefona je obavezan element obrasca za narudžbu na sajtu. Kao i svaka praktična preporuka naših stručnjaka, i ova se izjava temelji na uspješnim slučajevima kupaca.

Pošto je sajt specijalizovan za aplikacije, polje za unos broja na sajtu je bilo opciono. Da bismo pratili promjenu procenta kupaca koji popunjavaju polje "telefon" u obrascu za narudžbu na stranici, primijenili smo prilagođenu varijablu u Google Analytics. U februaru nijedan od devet kupaca nije popunio polje „telefon“. U martu smo implementirali masku za unos, a korisnici su počeli da je popunjavaju. Radi čistoće eksperimenta, polje je ostavljeno opciono i nisu napravljene nikakve druge promjene.
Rezultat za mart je 19 brojeva sa 22 korisnika koji su popunili aplikaciju. Drugim riječima, 85% korisnika koji su naručili aplikaciju ostavili su svoj broj telefona.

Studija slučaja web stranice Clearinghouse: povećanje od 15,4% u popunjavanju polja za broj telefona

Web stranica klijenta bavi se uslugama pisanja eseja, seminarskih, diplomskih i drugih radova. Broj telefona korisnika je poželjan za komunikaciju, ali ovo polje je bilo opciono na sajtu. Korisnik nije mogao popuniti formular ili napisati bilo šta u ovo polje. Kao i prvi put, u prvoj fazi smo postavili praćenje popunjavanja polja "telefon" u Google Analytics. U novembru, od 59 prijava koje su ostavili posjetioci sajta, 15 nije sadržavalo brojeve. Odnosno, kompanija je primila samo 74,6% dostavljenih obrazaca sa popunjenim brojem. Zatim smo dodali masku za unos u polje telefona. U decembru je na sajt stiglo 60 prijava. Istovremeno, samo 6 popunjenih formulara nije sadržalo telefonski broj klijenta. Shodno tome, 90% dostavljenih narudžbenica sadržavalo je ispravno popunjeno polje "telefon". Za mjesec - povećanje od 15,4%, samo zbog uvođenja maske za unos brojeva. Konačno - interni slučaj agencije.

Polje broja na Netpeak obrascu za narudžbu je također opciono. Ali brojevi telefona su važni kako bi kupci uvijek znali broj i status svoje aplikacije (ove podatke šaljemo SMS-om), kao i da bi optimizirali rad account managera. Period eksperimenta, kao iu prethodnim primjerima, je dva mjeseca. Kao rezultat pojavljivanja maske za unos brojeva, procenat popunjavanja formulara je povećan sa 44% na 83% - za 39,4%.
Nakon eksperimenta, implementirali smo masku na stranicu. Polje za unos broja ostalo je opciono. Aplikacija neće proći samo ako se u ovo polje unese pogrešan broj. Istovremeno, prve cifre u maski se mijenjaju u zavisnosti od zemlje u kojoj se korisnik stranice nalazi. Ako govorimo o prednarudžbenici, onda je zanimljivo znati koliko su aplikacije sa brojevima telefona bolje. Uzeli smo sve potencijalne klijente ikada primljene putem obrasca za prednarudžbe i izračunali postotak onih koji su se pretvorili u kupce sa i bez broja. Ovo posljednje se pokazalo kao najviše sa 0,81%.

Izlaz: ako vam osoba ostavi svoj broj u obrascu, to nije garancija prijenosa sredstava.

Ako govorimo o formi prednarudžbe, do izražaja dolaze mogućnosti reaktiviranja kupaca, mogućnosti koje se otvaraju trgovcima naoružanim bazom ličnih brojeva telefona korisnika. O uspješnim slučajevima reaktivacije ćemo govoriti u jednom od novih postova. U međuvremenu, savjetujemo vam da prije bilo kakvih radnji sa brojevima telefona u bazi pročitate koje mjere treba poduzeti. Podijelite u komentarima svoje iskustvo implementacije maske za unos brojeva telefona i zapažanja o kvaliteti dolaznih zahtjeva.