Ovaj jQuery dodatak omogućuje automatski odabir odgovarajuće maske za unos na temelju unesenog početka telefonskog broja. To vam omogućuje brži unos telefonskog broja na stranici web stranice bez pogrešaka. Osim toga, razvijeni dodatak može se koristiti iu drugim područjima ako se pravila unosa mogu prikazati u obliku nekoliko maski unosa.
Uvod Web stranice zahtijevaju unos podataka o telefonskom broju. Događa se da svaka država ima pravo uspostaviti vlastita pravila biranja i duljinu broja, zbog čega povremeno dolazi do zbrke među stanovnicima različitih zemalja: neki su navikli označavati broj s početnom znamenkom 8, drugi s vodećom znamenkom znamenku 0, a ostale sa znakom + Pregledajte postojeća rješenja Kako bi se nekako riješila složenost i brojevi doveli u jedinstveni format, postoje 3 glavna rješenja:Uzimajući u obzir činjenicu da je broj zemalja u svijetu relativno mali, odlučeno je sastaviti popis maski za unos za sve zemlje. Kao izvor korišteni su podaci objavljeni na web stranici Međunarodne telekomunikacijske unije.
Prikupljanje ovih podataka donijelo je mnoga iznenađenja. U procesu prikupljanja informacija bilo je potrebno uzeti u obzir sve moguće mogućnosti telefonskih brojeva, uključujući i unutar zemlje. Međutim, zbog velike količine ručno obrađenih podataka, moguće je da su u prikupljenoj bazi podataka ostale netočnosti. Planirano je da se s vremenom izvrše korekcije početne garniture.
Softverska implementacija Implementacija jquery.inputmask, koja je mnogo puta spominjana na Habrahabru, korištena je kao jezgra maske za unos. Ovaj dodatak trenutno se aktivno razvija i, štoviše, dizajniran je na takav način da je prilično jednostavno napisati proširenja za njega. Međutim, pokazalo se da je u ovom problemu gotovo nemoguće napisati takvo proširenje. Nisam modificirao niti prepisao originalni dodatak kako bi odgovarao mojim potrebama, jer... njegov autor nastavlja aktivno raditi na proširenju funkcionalnosti, zbog čega bi primjena mojih izmjena mogla biti problematična. Stoga sam morao napisati plug-in dodatak preko glavne jezgre, koji prati (plus presreće) vanjske utjecaje i vrši izmjene podataka. Kako bismo implementirali naše rukovatelje vanjskim utjecajem prije rukovatelja glavnog dodatka, upotrijebili smo dodatak biblioteke jquery.bind-first. Razvrstavanje dopuštenih maski za unos Kako biste pravilno odabrali najprikladniju masku za unos, cijeli skup maski mora se najprije sortirati u poseban. put. Pri razvoju pravila sortiranja usvojene su sljedeće konvencije:Rezultat su sljedeća pravila sortiranja redoslijedom kojim su primijenjena:
- keydown - pritisci tipki backspace i delete se prate kako bi se promijenila trenutna maska unosa prije nego što glavni rukovatelj ukloni jedan znak iz teksta. Osim toga, sinkronizacija se prati pritiskom na tipku Insert, koja mijenja način unosa teksta.
- pritisak na tipku - budući da uneseni znak možda nije dopušten izvornom maskom unosa (budući da su svi značajni znakovi u njoj zamijenjeni zamjenskim znakom), potrebno je provjeriti da novi redak zadovoljava jednu od dopuštenih maski. Ako nema takvih maski, tada se unos znakova odbacuje; inače se maska unosa ažurira, nakon čega se događaj prosljeđuje rukovatelju jezgre.
- zalijepi , unos - zalijepi tekst iz međuspremnika. Prije prijenosa obrade u jezgru odabire se maska unosa za niz koji je rezultat lijepljenja teksta iz međuspremnika. Ako se maska za unos ne može pronaći, tekst se skraćuje znak po znak od kraja sve dok tekst ne odgovara barem jednoj maski za unos. Slična se operacija izvodi prilikom ispravljanja teksta u polju za unos pozivom funkcije val(), kao i prilikom inicijalizacije maske za unos ako se primjenjuje na neprazno polje za unos.
- dragdrop , drop - obrada je slična događaju lijepljenja.
- zamućenje - dodatna obrada u slučaju da je omogućen način brisanja teksta kada se fokus izgubi ako ne zadovoljava masku unosa. Ovaj događaj se presreće nakon glavnog rukovatelja, za razliku od prethodnih.
Svi događaji su obješeni u prostor maske za unos. Time se izbjegava neispravno ponašanje prilikom pozivanja inputmask nakon inicijalizacije dodatka (budući da kernel uklanja sve prethodno instalirane rukovatelje u prostoru inputmask nakon inicijalizacije).
Primjer upotrebe Format popisa maski Popis maski je JavaScript niz objekata, po mogućnosti s istim skupom svojstava. Najmanje jedno svojstvo koje sadrži masku unosa mora biti prisutno za sve objekte polja. Naziv parametra koji sadrži masku može biti proizvoljan. Ispod je fragment takvog niza:[ … ( "mask": "+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": " " ), … ] Parametri povezivanja dodatka Prije povezivanja potrebno je učitati i sortirati popis maski. To se radi izvršavanjem sljedeće funkcije:
$.masksSort = funkcija (maskList, defs, match, key)
- maskList - niz objekata koji pohranjuju ulazne maske (fragment objekta vidi gore);
- defs - niz zamjenskih znakova (u mom slučaju to je simbol #);
- match - regularni izraz koji opisuje značajne znakove (u mom slučaju ovo je /|#/);
- ključ je naziv parametra objekta niza koji sadrži ulaznu masku.
Kada je povezan, dodatak dobiva poseban objekt koji opisuje njegov rad. Ovaj objekt sadrži sljedeći skup parametara:
- inputmask - objekt koji sadrži parametre proslijeđene glavnom dodatku inputmask;
- match - regularni izraz koji opisuje značajne znakove, isključujući zamjenske znakove;
- zamijeni - zamjenski znak kojim će se zamijeniti svi značajni znakovi; možda neće biti prisutan u objektu definicija objekta inputmask;
- popis - niz objekata koji opisuju ulazne maske;
- listKey - naziv parametra unutar objekta koji pohranjuje ulaznu masku;
- onMaskChange - funkcija koja se poziva kada se maska unosa ažurira; prvi parametar je objekt iz niza čija ulazna maska odgovara unesenom tekstu, a drugi parametar je točnost definicije maske: true - ulazna maska odgovara u potpunosti, false - moraju se unijeti dodatni znakovi da bi se pouzdano definirati masku.
Da biste inicijalizirali dodatak, trebate primijeniti metodu inputmasks na polje za unos:
$.fn.inputmasks = funkcija (maskOpts, način)
- maskOpts - objekt koji opisuje rad dodatka;
- način rada - izborno; trenutačno je podržana vrijednost isCompleted - kao rezultat, metoda vraća true ako je tekst koji odgovara odgovarajućoj maski potpuno unesen, a false u suprotnom.
Maska unosa var maskList = $.masksSort($.masksLoad("phone-codes.json"), ["#"], /|#/, "mask"); var maskOpts = ( inputmask: ( definitions: ( "#": ( validator: "", cardinality: 1 ) ), //clearIncomplete: true, showMaskOnHover: false, autoUnmask: true ), match: //, replace: "# ", popis: maskList, listKey: "maska", onMaskChange: funkcija(maskObj, dovršeno) ( if (dovršeno) ( var hint = maskObj.name_ru; if (maskObj.desc_ru && maskObj.desc_ru != "") ( hint + = " (" + maskObj.desc_ru + ")"; ) $("#descr").html(hint) ($("#descr").html("Maska unosa"); ) $(this) .attr("placeholder", $(this).inputmask("getemptymask") ); $("#phone_mask").change(function() ( if ($("#phone_mask").is(":checked")) ( $("#customer_phone").inputmasks(maskOpts); ) else ( $ ("#telefon_korisnika").inputmask("+[######################]", maskOpts.inputmask) .attr("placeholder", $("# telefon_kupca").inputmask("getemptymask")); $("#descr").html("Maska unosa"); ) )); $("#phone_mask").promjena(); Demonstracija Primjer demonstracije razvijenog dodatka prikazan je na
Ovaj jQuery dodatak omogućuje automatski odabir odgovarajuće maske za unos na temelju unesenog početka telefonskog broja. To vam omogućuje brži unos telefonskog broja na stranici web stranice bez pogrešaka. Osim toga, razvijeni dodatak može se koristiti iu drugim područjima ako se pravila unosa mogu prikazati u obliku nekoliko maski unosa.
Uvod Web stranice zahtijevaju unos podataka o telefonskom broju. Događa se da svaka država ima pravo uspostaviti vlastita pravila biranja i duljinu broja, zbog čega povremeno dolazi do zbrke među stanovnicima različitih zemalja: neki su navikli označavati broj s početnom znamenkom 8, drugi s vodećom znamenkom znamenku 0, a ostale sa znakom + Pregledajte postojeća rješenja Kako bi se nekako riješila složenost i brojevi doveli u jedinstveni format, postoje 3 glavna rješenja:Uzimajući u obzir činjenicu da je broj zemalja u svijetu relativno mali, odlučeno je sastaviti popis maski za unos za sve zemlje. Kao izvor korišteni su podaci objavljeni na web stranici Međunarodne telekomunikacijske unije.
Prikupljanje ovih podataka donijelo je mnoga iznenađenja. U procesu prikupljanja informacija bilo je potrebno uzeti u obzir sve moguće mogućnosti telefonskih brojeva, uključujući i unutar zemlje. Međutim, zbog velike količine ručno obrađenih podataka, moguće je da su u prikupljenoj bazi podataka ostale netočnosti. Planirano je da se s vremenom izvrše korekcije početne garniture.
Softverska implementacija Implementacija jquery.inputmask, koja je mnogo puta spominjana na Habrahabru, korištena je kao jezgra maske za unos. Ovaj dodatak trenutno se aktivno razvija i, štoviše, dizajniran je na takav način da je prilično jednostavno napisati proširenja za njega. Međutim, pokazalo se da je u ovom problemu gotovo nemoguće napisati takvo proširenje. Nisam modificirao niti prepisao originalni dodatak kako bi odgovarao mojim potrebama, jer... njegov autor nastavlja aktivno raditi na proširenju funkcionalnosti, zbog čega bi primjena mojih izmjena mogla biti problematična. Stoga sam morao napisati plug-in dodatak preko glavne jezgre, koji prati (plus presreće) vanjske utjecaje i vrši izmjene podataka. Kako bismo implementirali naše rukovatelje vanjskim utjecajem prije rukovatelja glavnog dodatka, upotrijebili smo dodatak biblioteke jquery.bind-first. Razvrstavanje dopuštenih maski za unos Kako biste pravilno odabrali najprikladniju masku za unos, cijeli skup maski mora se najprije sortirati u poseban. put. Pri razvoju pravila sortiranja usvojene su sljedeće konvencije:Rezultat su sljedeća pravila sortiranja redoslijedom kojim su primijenjena:
- keydown - pritisci tipki backspace i delete se prate kako bi se promijenila trenutna maska unosa prije nego što glavni rukovatelj ukloni jedan znak iz teksta. Osim toga, sinkronizacija se prati pritiskom na tipku Insert, koja mijenja način unosa teksta.
- pritisak na tipku - budući da uneseni znak možda nije dopušten izvornom maskom unosa (budući da su svi značajni znakovi u njoj zamijenjeni zamjenskim znakom), potrebno je provjeriti da novi redak zadovoljava jednu od dopuštenih maski. Ako nema takvih maski, tada se unos znakova odbacuje; inače se maska unosa ažurira, nakon čega se događaj prosljeđuje rukovatelju jezgre.
- zalijepi , unos - zalijepi tekst iz međuspremnika. Prije prijenosa obrade u jezgru odabire se maska unosa za niz koji je rezultat lijepljenja teksta iz međuspremnika. Ako se maska za unos ne može pronaći, tekst se skraćuje znak po znak od kraja sve dok tekst ne odgovara barem jednoj maski za unos. Slična se operacija izvodi prilikom ispravljanja teksta u polju za unos pozivom funkcije val(), kao i prilikom inicijalizacije maske za unos ako se primjenjuje na neprazno polje za unos.
- dragdrop , drop - obrada je slična događaju lijepljenja.
- zamućenje - dodatna obrada u slučaju da je omogućen način brisanja teksta kada se fokus izgubi ako ne zadovoljava masku unosa. Ovaj događaj se presreće nakon glavnog rukovatelja, za razliku od prethodnih.
Svi događaji su obješeni u prostor maske za unos. Time se izbjegava neispravno ponašanje prilikom pozivanja inputmask nakon inicijalizacije dodatka (budući da kernel uklanja sve prethodno instalirane rukovatelje u prostoru inputmask nakon inicijalizacije).
Primjer upotrebe Format popisa maski Popis maski je JavaScript niz objekata, po mogućnosti s istim skupom svojstava. Najmanje jedno svojstvo koje sadrži masku unosa mora biti prisutno za sve objekte polja. Naziv parametra koji sadrži masku može biti proizvoljan. Ispod je fragment takvog niza:[ … ( "mask": "+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": " " ), … ] Parametri povezivanja dodatka Prije povezivanja potrebno je učitati i sortirati popis maski. To se radi izvršavanjem sljedeće funkcije:
$.masksSort = funkcija (maskList, defs, match, key)
- maskList - niz objekata koji pohranjuju ulazne maske (fragment objekta vidi gore);
- defs - niz zamjenskih znakova (u mom slučaju to je simbol #);
- match - regularni izraz koji opisuje značajne znakove (u mom slučaju ovo je /|#/);
- ključ je naziv parametra objekta niza koji sadrži ulaznu masku.
Kada je povezan, dodatak dobiva poseban objekt koji opisuje njegov rad. Ovaj objekt sadrži sljedeći skup parametara:
- inputmask - objekt koji sadrži parametre proslijeđene glavnom dodatku inputmask;
- match - regularni izraz koji opisuje značajne znakove, isključujući zamjenske znakove;
- zamijeni - zamjenski znak kojim će se zamijeniti svi značajni znakovi; možda neće biti prisutan u objektu definicija objekta inputmask;
- popis - niz objekata koji opisuju ulazne maske;
- listKey - naziv parametra unutar objekta koji pohranjuje ulaznu masku;
- onMaskChange - funkcija koja se poziva kada se maska unosa ažurira; prvi parametar je objekt iz niza čija ulazna maska odgovara unesenom tekstu, a drugi parametar je točnost definicije maske: true - ulazna maska odgovara u potpunosti, false - moraju se unijeti dodatni znakovi da bi se pouzdano definirati masku.
Da biste inicijalizirali dodatak, trebate primijeniti metodu inputmasks na polje za unos:
$.fn.inputmasks = funkcija (maskOpts, način)
- maskOpts - objekt koji opisuje rad dodatka;
- način rada - izborno; trenutačno je podržana vrijednost isCompleted - kao rezultat, metoda vraća true ako je tekst koji odgovara odgovarajućoj maski potpuno unesen, a false u suprotnom.
Maska unosa var maskList = $.masksSort($.masksLoad("phone-codes.json"), ["#"], /|#/, "mask"); var maskOpts = ( inputmask: ( definitions: ( "#": ( validator: "", cardinality: 1 ) ), //clearIncomplete: true, showMaskOnHover: false, autoUnmask: true ), match: //, replace: "# ", popis: maskList, listKey: "maska", onMaskChange: funkcija(maskObj, dovršeno) ( if (dovršeno) ( var hint = maskObj.name_ru; if (maskObj.desc_ru && maskObj.desc_ru != "") ( hint + = " (" + maskObj.desc_ru + ")"; ) $("#descr").html(hint) ($("#descr").html("Maska unosa"); ) $(this) .attr("placeholder", $(this).inputmask("getemptymask") ); $("#phone_mask").change(function() ( if ($("#phone_mask").is(":checked")) ( $("#customer_phone").inputmasks(maskOpts); ) else ( $ ("#telefon_korisnika").inputmask("+[######################]", maskOpts.inputmask) .attr("placeholder", $("# customer_phone").inputmask("getemptymask")); $("#descr").html("Maska unosa"); ) )); $("#phone_mask").promjena(); Demonstracija Primjer demonstracije razvijenog dodatka prikazan je na
Na prvi pogled odgovor je očigledan: označite polje "telefonski broj" prema potrebi. Ali postoje niše u kojima korisnik može napustiti stranicu zbog nepotrebnih obaveznih polja. Na primjer, aplikacije, softver, stranice za prodaju sadržaja. Međutim, korisnički brojevi za takve projekte važni su kao dodatni podaci koji omogućuju interakciju s potencijalnim klijentima u budućnosti. Štoviše, postoji jednostavno i učinkovito rješenje - korištenje maske za unos. Dokažimo to slučajevima.
Zašto vam je potrebna maska za unos?Maska za unos pokazuje u kojem formatu trebate unijeti podatke u polje. Na primjer, ako korisnik unese telefonski broj bez predbroja ili telefonskog broja u polje adrese, neće moći prijeći na sljedeću stavku. Maska u obrascima omogućuje ujednačen izgled unesenih podataka, što pojednostavljuje pretraživanje i upravljanje bazom podataka. Prema preporukama Netpeaka, maska za unos telefonskog broja je obavezan element narudžbenice na web stranici. Kao i svaka praktična preporuka naših stručnjaka, ova se odredba temelji na uspješnim slučajevima klijenata.
Budući da je stranica specijalizirana za aplikacije, polje za unos broja na stranici nije obavezno. Kako bismo pratili promjene u postotku kupaca koji ispunjavaju polje "telefon" na obrascu za narudžbu na web mjestu, koristili smo prilagođenu varijablu u Google Analyticsu. U veljači niti jedan od devet kupaca nije ispunio polje "telefon". U ožujku smo uveli masku za unos i korisnici su je počeli ispunjavati. Radi čistoće eksperimenta, polje je ostavljeno kao izborno i nisu napravljene nikakve druge promjene. 
Rezultat za ožujak je 19 brojeva s 22 korisnika koji su ispunili aplikaciju. Drugim riječima, 85% korisnika koji su naručili aplikaciju ostavilo je svoj broj telefona. 
Web stranica klijenta pruža usluge pisanja eseja, kolegija, disertacija i drugih radova. Telefonski broj korisnika je poželjan za komunikaciju, ali na stranici ovo polje nije obavezno. Korisnik nije mogao ispuniti obrazac niti bilo što napisati u ovo polje. Kao i prvi put, u prvoj fazi postavili smo praćenje popunjavanja polja “telefon” u Google Analyticsu. U studenom, od 59 prijava posjetitelja stranice, 15 ih nije sadržavalo brojeve. Odnosno, tvrtka je dobila samo 74,6% predanih obrazaca s ispunjenim brojem. 
Zatim smo dodali masku za unos u polje telefona. U prosincu je stranica zaprimila 60 prijava. Štoviše, samo 6 ispunjenih obrazaca nije sadržavalo telefonski broj klijenta. Posljedično, 90% dostavljenih obrazaca za narudžbe sadržavalo je ispravno popunjeno polje za telefon. Tijekom mjeseca - povećanje od 15,4%, samo zahvaljujući uvođenju maske za unos broja. 
Na kraju, interna studija slučaja agencije.
Polje za brojeve u obrascu za narudžbu na web stranici Netpeak također nije obavezno. Ali telefonski brojevi su važni kako bi klijenti uvijek znali broj i status svoje prijave (te podatke šaljemo putem SMS-a), kao i za optimizaciju rada account managera. Razdoblje eksperimenta, kao iu prethodnim primjerima, je dva mjeseca. Kao rezultat pojave maske za unos broja, postotak ispunjenih obrazaca porastao je s 44% na 83% - za 39,4%. 
Nakon eksperimenta implementirali smo masku na mjesto. Polje za unos broja ostaje opcionalno. Zahtjev neće biti obrađen samo ako je u ovo polje upisan netočan broj. U tom se slučaju prve znamenke u maski mijenjaju ovisno o zemlji u kojoj se nalazi korisnik stranice. Ako govorimo o prednarudžbi, onda je zanimljivo znati koliko su aplikacije s telefonskim brojevima kvalitetnije. Uzeli smo sve tragove ikada primljene putem prednarudžbe i izračunali postotak onih koji su se pretvorili u kupce bez i s brojem. Potonji se pokazao najvećim za 0,81 posto.
Zaključak: ako vam osoba ostavi svoj broj na obrascu, to ne jamči prijenos sredstava.
Ako govorimo o prednarudžbi, u prvi plan dolaze mogućnosti reaktivacije kupaca, mogućnosti koje se otvaraju za marketinške stručnjake naoružane bazom osobnih telefonskih brojeva korisnika. Govorit ćemo o uspješnim slučajevima reaktivacije u jednom od naših novih postova. U međuvremenu, savjetujemo vam da pročitate o mjerama koje treba poduzeti prije bilo kakvih radnji s telefonskim brojevima u bazi podataka. Podijelite u komentarima svoje iskustvo implementacije maske za unos telefonskih brojeva i svoja zapažanja o kvaliteti dolaznih aplikacija.
