Telefona maskas. Tālruņa lauka maskēšana un apstiprināšana, izmantojot jQuery

Šis jQuery spraudnis ļauj automātiski atlasīt piemērotu ievades masku, pamatojoties uz ievadīto tālruņa numura sākumu. Tas ļauj veikt tālruņa numura ievadīšanu vietnes lapā ātrāk un bez kļūdām. Turklāt izstrādāto spraudni var izmantot arī citās jomās, ja ievades noteikumus var attēlot kā vairākas ievades maskas.

Ievads

Vietnēs ir jāievada tālruņa numura informācija. Tā sagadījās, ka katrai valstij ir tiesības noteikt savus sastādīšanas noteikumus un numura garumu, kā rezultātā starp iedzīvotājiem dažādas valstis ik pa laikam rodas neskaidrības: daži ir pieraduši norādīt skaitli ar sākuma ciparu 8, citi ar sākuma ciparu 0, bet citi ar + zīmi.

Esošo risinājumu apskats

Lai kaut kā atrisinātu radušās grūtības un apvienotu skaitļus vienā formātā, ir 3 galvenie risinājumi:
  1. Lietotājam tiek piedāvāts ievadīt numuru, izmantojot ievades masku. Priekšrocība: skaidrais skaitļa displejs samazina iespējamās kļūdas skaitļā. Trūkums: katrai valstij ir sava pareizrakstība un skaitļa garums.
  2. Lietotājam tiek piedāvāts atsevišķi izvēlēties valsti un atsevišķi ievadīt pārējo numuru; iespējams, izmantojot ievades masku. Ieguvums: Iespēja izmantot dažādas ievades maskas dažādām valstīm (kā arī valsts reģioniem). Trūkumi: valstu saraksts (un reģioni katrā valstī) var būt garš; tālruņa numurs beidz pastāvēt kopumā (vai pirms numura saglabāšanas un parādīšanas ir nepieciešama pirmapstrāde).
  3. Ievietojiet + zīmi numura priekšā (ārpus ievades) un ļaujiet ievadīt tikai ciparus. Priekšrocības: ieviešanas vienkāršība. Trūkums: numura vizuālā displeja trūkums.

Ieteiktais risinājums

Rezultātā tika nolemts modificēt parasto ievades masku, lai tā mainītos atbilstoši skaitļa pašreizējai vērtībai. Turklāt, ievadot numuru, tiek piedāvāts parādīt noteiktās valsts nosaukumu. Šī pieeja, subjektīvi, vajadzētu atrisināt visus iepriekš uzskaitīto risinājumu trūkumus.

Ņemot vērā, ka pasaules valstu skaits ir salīdzinoši neliels, tika nolemts sastādīt ievades masku sarakstu visām valstīm. Kā avots izmantota Starptautiskās telekomunikāciju savienības mājaslapā publicētā informācija.

Šīs informācijas apkopošana sagādāja daudz pārsteigumu. Informācijas vākšanas procesā bija jāņem vērā visi iespējamie varianti tālruņu numuri, tostarp valsts iekšienē. Tomēr, ņemot vērā liels skaits manuāli apstrādāta informācija, iespējams, ka savāktajā datu bāzē ir palikušas neprecizitātes. Laika gaitā plānots veikt korekcijas sākotnējā komplektācijā.

Programmatūras ieviešana

Par ievades maskas kodolu tika izmantota jquery.inputmask ieviešana, kas vairākkārt tika pieminēta vietnē Habrahabr. Šis spraudnis šobrīd tiek aktīvi izstrādāts un turklāt veidots tā, ka pietiek tam vienkārši uzrakstīt paplašinājumus. Taču šajā problēmā uzrakstīt šādu paplašinājumu izrādījās gandrīz neiespējami. Es nemodificēju vai nepārrakstīju sākotnējo spraudni savām vajadzībām, jo. tā autors turpina aktīvi strādāt pie funkcionalitātes paplašināšanas, kā rezultātā manu labojumu pielietošana var būt problemātiska. Tāpēc man virs galvenā kodola bija jāraksta spraudnis, kas uzrauga (plus pārtver) ārējās ietekmes un modificē datus. Lai injicētu savus apdarinātājus ārējām ietekmēm pirms galvenā spraudņa apstrādātājiem tika izmantota spraudņu bibliotēka jquery.bind-first.
Atļauto ievades masku kārtošana
Lai pareizi izvēlētos vispiemērotāko ievades masku, viss masku komplekts vispirms ir jāsakārto īpašā veidā. Izstrādājot šķirošanas noteikumus, tika pieņemtas šādas konvencijas:
  1. Visas ievades maskas rakstzīmes ir sadalītas 2 veidos: nozīmīgi simboli(manā gadījumā tas ir simbols # , kas nozīmē patvaļīgu skaitli, un skaitļi no 0 līdz 9) un dekoratora rakstzīmes (viss pārējais).
  2. Vēl viens rakstzīmju iedalījums ievades maskā ir veidņu rakstzīmes (manā gadījumā tā ir # rakstzīme) un viss pārējais.

Rezultātā tiek iegūti šādi šķirošanas noteikumi to piemērošanas secībā:

  1. Salīdzinot 2 ievades maskas pa rakstzīmēm, tiek ņemtas vērā tikai nozīmīgas rakstzīmes (nevis dekorētājus).
  2. Dažādas rakstzīmes tiek uzskatītas par vienādām, un citas nozīmīgas rakstzīmes tiek salīdzinātas, pamatojoties uz to kodu.
  3. Rakstzīmes bez raksta vienmēr ir mazākas nekā rakstzīmes, un rezultātā tās ir novietotas augstāk.
  4. Jo īsāks ir nozīmīgo rakstzīmju garums ievades maskā, jo mazāka ir ievades maska ​​un tā ir augstāka.
Meklējiet piemērotu ievades masku
Salīdzinot ievades tekstu ar nākamo masku no sakārtotā saraksta, tiek ņemtas vērā tikai katras maskas nozīmīgās rakstzīmes. Ja virkne ir garāka par ievades masku, lai gan visas iepriekšējās rakstzīmes ir izturējušas pārbaudi, ievades maska ​​tiek uzskatīta par nederīgu. Ja ievades teksts atbilst vairākām ievades maskām, tiek atgriezta pirmā. Turklāt atrastajā maskā visas nozīmīgākās rakstzīmes (arī neveidnes) tiek aizstātas ar šablonu, kas ir visu rakstzīmju kombinācija, ko pieļauj kāda no veidnes rakstzīmēm.
Notikumu apstrāde un pārtveršana
Lai novērstu konfliktus ar galvenās ievades maskas programmas notikumu apstrādātājiem, tiek pārtverti šādi notikumi:
  • taustiņu noslēgšana- tiek izsekoti taustiņsitieni Backspace un Delete - lai mainītu pašreizējo ievades masku, pirms galvenais apstrādātājs izdzēš vienu rakstzīmi no teksta. Turklāt, nospiežot taustiņu Insert, kas maina teksta ievades režīmu, tiek pārraudzīta sinhronizācija.
  • taustiņu nospiešana- tā kā sākotnējā ievades maska ​​var neatļaut ievades rakstzīmi (jo visas nozīmīgās rakstzīmes tajā ir aizstātas ar veidni), jums ir jāpārbauda jauna līnija lai apmierinātu kādu no atļautajām maskām. Ja šādu masku nav, rakstzīmju ievade tiek atmesta, pretējā gadījumā ievades maska ​​tiek atjaunināta, pēc kuras notikums tiek pārsūtīts uz kodola apstrādātāju.
  • pastas, ievade- ielīmējiet tekstu no starpliktuves. Pirms apstrādes nodošanas kodolam tiek atlasīta ievades maska ​​virknei, kas iegūta, ielīmējot tekstu no starpliktuves. Ja ievades masku nevarēja atlasīt, teksts tiek saīsināts pa rakstzīmei no beigām, līdz teksts atbilst vismaz vienai ievades maskai. Līdzīga darbība tiek veikta, labojot tekstu ievades laukā, izsaucot funkciju val(), kā arī inicializējot ievades masku, ja tā tiek lietota netukšā ievades laukā.
  • velciet-nometiet, piliens- apstrāde ir līdzīga ielīmēšanas notikumam.
  • aizmiglot - papildu apstrāde ja fokusa zuduma gadījumā ir iespējots teksta dzēšanas režīms, ja tas neatbilst ievades maskai. Šis notikums tiek noķerts pēc galvenā hendlera, atšķirībā no iepriekšējiem.

Visi notikumi ir pakārti ievades maskas telpā. Tādējādi tiek novērsta nepareiza rīcība, izsaucot ievades masku pēc pievienojumprogrammas inicializācijas (jo kodols inicializācijas laikā noņem visus iepriekš instalētos apdarinātājus ievades maskas vietā).

Lietošanas piemērs

Masku saraksta formāts
Masku saraksts ir JavaScript objektu masīvs, vēlams ar tādu pašu rekvizītu kopu. Visos masīva objektos ir jābūt vismaz vienam rekvizītam, kas satur ievades masku. Parametra nosaukums, kas satur masku, var būt patvaļīgs. Zemāk ir šāda masīva fragments:
[ … ( "maska": "+7(###)###-##-##", "cc": "RU", "name_en": "Krievija", "desc_en": "", " name_ru": "Krievija", "desc_ru": "" ), ( "maska": "+250(###)###-###", "cc": "RW", "name_en": " Ruanda", "desc_en": "", "name_ru": "Ruanda", "desc_ru": "" ), ( "maska": "+966-5-####-####", "cc ": "SA", "name_en": "Saūda Arābija", "desc_en": "mobilais", "name_ru": "Saūda Arābija", "desc_ru": "mobilais" ), ( "mask": "+966- #-###-####", "cc": "SA", "name_en": "Saūda Arābija", "desc_en": "", "name_ru": "Saūda Arābija", "desc_ru": " "), …]
Spraudņa savienojuma iespējas
Pirms savienojuma izveides ir nepieciešams lejupielādēt un sakārtot masku sarakstu. Tas tiek darīts, izpildot šādu funkciju:
$.masksSort = funkcija(masksaraksts, defs, atbilstība, atslēga)
  • masku saraksts- objektu masīvs, kas glabā ievades maskas (objekta fragmentu skatiet iepriekš);
  • defs- veidnes rakstzīmju masīvs (manā gadījumā tas ir # simbols);
  • atbilst- regulāra izteiksme, kas apraksta nozīmīgas rakstzīmes (manā gadījumā tā ir /|#/);
  • taustiņu- masīva objekta parametra nosaukums, kas satur ievades masku.

Kad ir izveidots savienojums, spraudnim tiek nodots īpašs objekts, kas apraksta tā darbību. Šis objekts satur šādu parametru kopu:

  • ievades maska- objekts, kas satur parametrus, kas nodoti galvenajam ievadmaskas spraudnim;
  • atbilst- regulāra izteiksme, kas apraksta nozīmīgas rakstzīmes, izņemot veidnes;
  • aizvietot- veidnes rakstzīme, kas tiks aizstāta ar visām nozīmīgajām rakstzīmēm; var nebūt ievadmaskas objekta definīciju objektā;
  • sarakstu- objektu masīvs, kas apraksta ievades maskas;
  • listKey- parametra nosaukums objektā, kas glabā ievades masku;
  • onMaskChange- funkcija, kas tiek izsaukta, atjauninot ievades masku; kā pirmais parametrs tiek nodots objekts no masīva, kura ievades maska ​​atbilst ievadītajam tekstam, bet kā otrais - maskas definīcijas precizitāte: true - ievades maska ​​pilnībā atbilst, false - nepieciešamas papildu rakstzīmes lai ticami noteiktu masku.

Lai inicializētu spraudni, ievades laukam ir jāpiemēro ievades masku metode:
$.fn.inputmasks = funkcija(maskOpts, režīms)

  • maskOpts- objekts, kas apraksta spraudņa darbību;
  • režīmā- neobligāti; iekšā pašlaik tiek atbalstīta vērtība isCompleted - rezultātā metode atgriež true, ja atbilstošajai maskai atbilstošs teksts tiek ievadīts pilnībā un false pretējā gadījumā.
Spraudņa savienojuma piemērs

Demonstrācija

Izstrādātā spraudņa demonstrācijas piemērs ir parādīts

No pirmā acu uzmetiena atbilde ir acīmredzama: pēc vajadzības atzīmējiet lauku "tālruņa numurs". Bet ir nišas, kurās lietotājs var atstāt vietni papildu obligāto lauku dēļ. Piemēram, lietojumprogrammas, programmatūra, vietnes, kas pārdod saturu. Tomēr lietotāju numuri šādiem projektiem ir svarīgi kā papildu dati, kas ļauj nākotnē sazināties ar potenciālajiem klientiem. Turklāt ir vienkāršs un efektīvs risinājums - ievades maskas izmantošana. Pierādīsim to ar gadījumiem.

Kāpēc mums ir nepieciešama ievades maska?

Ievades maska ​​norāda formātu, kādā dati jāievada laukā. Piemēram, ja lietotājs adreses laukā ievadīs tālruņa numuru bez apgabala koda vai tālruņa numura, viņš nevarēs pāriet uz nākamo vienumu. Veidlapas maska ​​nodrošina vienotu skatījumu uz ievades datiem, kas vienkāršo meklēšanu un datu bāzes pārvaldību. Netpeak ieteikumos tālruņa numura ievades maska ​​ir obligāts elements pasūtījuma veidlapā vietnē. Tāpat kā jebkurš praktisks mūsu ekspertu ieteikums, šis apgalvojums ir balstīts uz veiksmīgiem klientu gadījumiem.

Tā kā vietne specializējās lietojumprogrammās, numura ievadīšanas lauks vietnē nebija obligāts. Lai izsekotu to klientu procentuālās daļas izmaiņām, kuri vietnes pasūtījuma veidlapā aizpilda lauku “tālrunis”, mēs izmantojām pielāgotu mainīgo Google Analytics. Februārī neviens no deviņiem pircējiem nav aizpildījis lauku “tālrunis”. Martā mēs ieviesām ievades masku, un lietotāji sāka to aizpildīt. Eksperimenta tīrības labad lauks tika atstāts neobligāts, un citas izmaiņas netika veiktas.
Marta rezultāts ir 19 izdevumi ar 22 lietotājiem, kuri aizpildīja pieteikumu. Citiem vārdiem sakot, 85% lietotāju, kas pasūtīja lietotni, atstāja savu tālruņa numuru.

Klīringa centra vietnes gadījuma izpēte: par 15,4% palielinājies tālruņa numura lauku aizpildīšanas skaits

Klienta mājas lapa nodarbojas ar eseju, kursa darbu, diplomdarbu un citu darbu rakstīšanas pakalpojumiem. Lietotāja tālruņa numurs ir vēlams saziņai, taču šis lauks vietnē nebija obligāts. Lietotājs nevarēja aizpildīt veidlapu vai neko ierakstīt šajā laukā. Tāpat kā pirmo reizi, arī pirmajā posmā mēs iestatījām Google Analytics lauka "tālrunis" aizpildīšanas izsekošanu. Novembrī no 59 vietnes apmeklētāju atstātajiem pieteikumiem 15 nebija skaitļu. Tas ir, uzņēmums saņēma tikai 74,6% no iesniegtajām veidlapām ar aizpildītu numuru. Pēc tam tālruņa laukam pievienojām ievades masku. Decembrī vietne saņēma 60 pieteikumus. Tajā pašā laikā tikai 6 aizpildītās veidlapās nebija norādīts klienta tālruņa numurs. Līdz ar to 90% no iesniegtajām pasūtījuma veidlapām bija pareizi aizpildīts "tālruņa" lauks. Mēnesim - pieaugums par 15,4%, tikai pateicoties skaitļu ievades maskas ieviešanai. Visbeidzot - aģentūras iekšējā lieta.

Numura lauks Netpeak pasūtījuma veidlapā arī nav obligāts. Taču tālruņu numuri ir svarīgi, lai klienti vienmēr zinātu savas aplikācijas numuru un statusu (šos datus nosūtām ar SMS), kā arī optimizētu kontu pārvaldnieku darbu. Eksperimenta periods, tāpat kā iepriekšējos piemēros, ir divi mēneši. Ciparu ievades maskas parādīšanās rezultātā veidlapu aizpildīšanas procents palielinājās no 44% līdz 83% - par 39,4%.
Pēc eksperimenta mēs ieviesām masku vietnē. Lauks numura ievadīšanai palika neobligāts. Pieteikums nepāries tikai tad, ja šajā laukā būs ievadīts nepareizs numurs. Tajā pašā laikā pirmie cipari maskā mainās atkarībā no valsts, kurā atrodas vietnes lietotājs. Ja runājam par priekšpasūtīšanas formu, tad interesanti uzzināt, cik labākas ir aplikācijas ar telefona numuriem. Mēs izmantojām visus potenciālos pirkumus, kas jebkad tika saņemti, izmantojot priekšpasūtīšanas veidlapu, un aprēķinājām to potenciālo pirkumu procentuālo daļu, kuri kļuva par klientiem ar un bez numura. Pēdējais izrādījās visvairāk - 0,81%.

Izvade: ja persona atstāj jums savu numuru veidlapā, tas negarantē līdzekļu pārskaitījumu.

Ja runājam par priekšpasūtīšanas formu, tad priekšplānā izvirzās klientu reaktivizēšanas iespējas, iespējas, kas paveras mārketinga speciālistiem, kas bruņojušies ar lietotāju personīgo tālruņu numuru datu bāzi. Par veiksmīgiem reaktivācijas gadījumiem runāsim vienā no jaunajiem ierakstiem. Tikmēr mēs iesakām izlasīt par pasākumiem, kas jāveic pirms jebkādām darbībām ar tālruņu numuriem datu bāzē. Dalieties komentāros savā pieredzē par tālruņa numuru ievades maskas ieviešanu un novērojumiem par ienākošo aplikāciju kvalitāti.

SAISTĪTIE RAKSTI