See jQuery pistikprogramm võimaldab teil sisestatud telefoninumbri alguse põhjal automaatselt valida sobiva sisestusmaski. See võimaldab muuta veebisaidi lehel telefoninumbri sisestamise kiiremaks ja veavabamaks. Lisaks saab väljatöötatud pistikprogrammi kasutada ka muudes valdkondades, kui sisestusreegleid saab esitada mitme sisendmaski kujul.

Sissejuhatus

Veebisaitidel on telefoninumbriteabe sisestamine väga vajalik. Juhtus nii, et igal riigil on õigus kehtestada oma valimisreeglid ja numbri pikkus, mille tulemusena elanike vahel erinevad riigid perioodiliselt tekib segadus: mõned on harjunud tähistama numbrit esinumbriga 8, teised juhtnumbriga 0 ja kolmandad + märgiga.

Olemasolevate lahenduste ülevaade

Tekkinud keerukuse kuidagi lahendamiseks ja numbrite ühtseks vorminguks viimiseks on kolm peamist lahendust:

1. Kasutajal palutakse sisestada number sisestusmaski abil. Eelis: numbri selge kuvamine minimeerib võimalikud numbrivead. Puudus: igal riigil on oma kirjapilt ja numbri pikkus.
2. Kasutajal palutakse eraldi valida riik ja eraldi sisestada ülejäänud number; võib-olla kasutades sisendmaski. Eelis: võimalus kasutada erinevaid sisestusmaske erinevate riikide jaoks (ja ka riigi piirkonniti). Puudused: riikide loend (ja iga riigi piirkonnid) võib olla suur; telefoninumber lakkab eksisteerimast tervikuna (või on enne numbri salvestamist ja kuvamist vaja eeltöötlust).
3. Asetage + märk numbri ette (väljaspool sisendit) ja lubage ainult numbrite sisestamist. Eelised: rakendamise lihtsus. Puudus: numbri visuaalse kuvamise puudumine.

Pakutud lahendus

Selle tulemusena otsustati tavalist sisendmaski muuta nii, et see muutuks vastavalt numbri praegusele väärtusele. Lisaks palutakse teil numbri sisestamisel kuvada määratud riigi nimi. See lähenemine, peab subjektiivselt lahendama kõik ülaltoodud lahenduste puudused.

Võttes arvesse asjaolu, et riike on maailmas suhteliselt vähe, otsustati koostada sisestusmaskide nimekiri kõigi riikide kohta. Allikana kasutati Rahvusvahelise Telekommunikatsiooni Liidu veebilehel avaldatud teavet.

Selle teabe kogumine tõi kaasa palju üllatusi. Teabe kogumise käigus oli vaja arvesse võtta kõiki võimalikud variandid telefoninumbrid, sealhulgas riigisiseselt. Siiski, pidades silmas suur hulk käsitsi töödeldud teave, on võimalik, et kogutud andmebaasis jäid ebatäpsused. Algsesse komplekti on plaanis aja jooksul korrektuure teha.

Tarkvara juurutamine

Sisendmaski tuumana kasutati rakendust jquery.inputmask, mida Habrahabris korduvalt mainiti. Seda pistikprogrammi arendatakse praegu aktiivselt ja pealegi on see loodud nii, et laiendusi on üsna lihtne kirjutada. Selle ülesande puhul osutus aga sellise laienduse kirjutamine peaaegu võimatuks. Alates sellest ajast ma ei muutnud ega kirjutanud ümber algset pistikprogrammi oma vajadustele vastavaks selle autor jätkab aktiivset tööd funktsionaalsuse laiendamisega, mille tulemusena võib minu toimetuste rakendamine osutuda problemaatiliseks. Seetõttu pidin üle põhituuma kirjutama lisaplugina, mis jälgib (pluss pealtkuulab) välismõjusid ja teeb andmete muudatusi. Oma käitlejate rakendamiseks välismõjud enne peamisi pistikprogrammide töötlejaid kasutati pluginateeki jquery.bind-first.

Lubatud sisestusmaskide sortimine

Sobivaima sisendmaski õigeks valimiseks tuleb kogu maskide komplekt spetsiaalselt sorteerida. Sorteerimisreeglite väljatöötamisel võeti kasutusele järgmised kokkulepped:

1. Kõik sisestusmaski märgid on jagatud kahte tüüpi: olulised sümbolid(minu puhul on see sümbol #, mis tähendab suvalist numbrit ja numbrid 0-9) ja dekoraatori sümbolid (kõik ülejäänud).
2. Teine sisestusmaski märkide jaotus on metamärgid (minu puhul on see sümbol #) ja kõik ülejäänud.

Tulemuseks on järgmised sortimisreeglid nende rakendamise järjekorras:

1. Kahe sisendmaski märgi kaupa võrdlemisel võetakse arvesse ainult tähendusrikkaid märke (mitte dekoraatoreid).
2. Erinevaid metamärke käsitletakse võrdsetena ja teisi olulisi märke võrreldakse nende koodi alusel.
3. Mallita sümbolid on alati väiksemad kui malli sümbolid ja seetõttu asuvad need kõrgemal.
4. Mida lühem on sisestusmaski oluliste märkide pikkus, seda väiksem on sisendmask ja seda kõrgem see on.

Sobiva sisestusmaski leidmine

Kui võrrelda sisendteksti sorteeritud loendi järgmise maskiga, võetakse arvesse ainult iga maski olulised märgid. Kui string on pikem kui sisendmask, kuigi kõik eelnevad märgid on kinnitatud, loetakse sisendmask kehtetuks. Kui sisendteksti rahuldab mitu sisestusmaski, tagastatakse neist esimene. Lisaks asendatakse leitud maskis kõik olulised sümbolid (ka mittemallilised) malliga, mis on kombinatsioon kõigist sümbolitest, mida mis tahes mallisümbolid lubavad.

Sündmuste käsitlemine ja pealtkuulamine

Et vältida konflikte sisendmaski põhituumiku sündmuste töötlejatega, peatatakse järgmised sündmused:

• klahvi alla- Jälgitakse tagasilükke ja kustutamise klahve – selleks, et muuta praegust sisestusmaski enne, kui põhikäitleja tekstist ühe märgi eemaldab. Lisaks jälgitakse sünkroonimiseks sisestusklahvi vajutamist, mis muudab tekstisisestusrežiimi.
• klahvivajutus- kuna sisestatud tähemärki ei pruugi algne sisestusmask lahendada (kuna kõik olulised märgid selles asendatakse malliga), peate kontrollima uus ridaühe lubatud maski rahuldamiseks. Kui selliseid maske pole, siis märgisisend loobutakse, vastasel juhul värskendatakse sisendmaski, misjärel edastatakse sündmus kerneli töötlejale.
• kleebi, sisend- teksti kleepimine lõikelaualt. Enne töötlemise tuumale ülekandmist valitakse reale sisestusmask, mis saadi lõikepuhvrisse teksti kleepimise tulemusena. Kui sisestusmaski ei õnnestunud leida, kärbitakse teksti tähemärgi haaval lõpust, kuni tekst rahuldab vähemalt ühe sisestusmaski. Sarnane toiming tehakse sisestusvälja teksti parandamisel funktsiooni val () kutsumisega, samuti sisestusmaski lähtestamisel, kui seda rakendatakse mittetühjale sisestusväljale.
• lohistada, tilk- töötlemine sarnaneb kleepimissündmusega.
• hägusus - täiendav töötlemine juhul, kui fookuse kaotamise korral teksti kustutamise režiim on lubatud, kui see ei rahulda sisestusmaski. Erinevalt eelmistest on see sündmus pealtkuulatud pärast põhikäitlejat.

Kõik sündmused riputatakse sisestusmaski ruumi. See väldib vale käitumist sisestusmaski kutsumisel pärast lisandmooduli initsialiseerimist (kuna tuum eemaldab lähtestamise käigus kõik eelnevalt installitud töötlejad sisestusmaski ruumist).

Kasutusnäide

Maskide loendi vorming

Maskide loend on JavaScripti objektide massiiv, eelistatavalt samade omaduste komplektiga. Kõigil massiivi objektidel peab olema vähemalt üks sisendmaski sisaldav atribuut. Maski sisaldava parameetri nimi võib olla suvaline. Allpool on fragment sellisest massiivist:
[… ("Mask": "+7 (###) ### - ## - ##", "cc": "RU", "name_en": "Venemaa", "desc_en": "", " name_ru ":" Venemaa "," desc_ru ":" "), (" mask ":" +250 (###) ### - ### "," cc ":" RW "," name_et ":" Rwanda "," desc_et ":" "," name_ru ":" Rwanda "," desc_ru ":" "), (" mask ":" + 966-5 - #### - #### "," cc ":" SA "," name_en ":" Saudi Araabia "," desc_en ":" mobile "," name_ru ":" Saudi Araabia "," desc_ru ":" mobile "), (" mask ":" + 966- # - ### - #### "," cc ":" SA "," name_en ":" Saudi Araabia "," desc_en ":" "," name_ru ":" Saudi Araabia "," desc_en ":" "), ...]

Plugina ühenduse parameetrid

Enne ühendamist peate maskide loendi laadima ja sorteerima. Seda tehakse järgmise funktsiooni täitmisega:
$ .masksSort = funktsioon (maskList, defs, vaste, võti)

• maskiloend- objektide massiiv, mis salvestab sisendmaske (objekti fragmenti vt eespool);
• defs- mallisümbolite massiiv (minu puhul on see sümbol #);
• vaste- regulaaravaldis, mis kirjeldab olulisi märke (minu puhul on see / | # /);
• võti- sisendmaski sisaldava massiiviobjekti parameetri nimi.

Ühendamisel edastatakse pistikprogrammile spetsiaalne objekt, mis kirjeldab selle tööd. See objekt sisaldab järgmisi parameetreid:

• sisestusmask- põhiplugina sisendmaskile edastatud parameetritega objekt;
• vaste- regulaaravaldis, mis kirjeldab olulisi märke, välja arvatud mallimärgid;
• asendada- malli sümbol, mis asendatakse kõigi oluliste sümbolitega; Ei pruugi olla sisendmaski objekti definitsiooniobjektis;
• nimekirja- objektide massiiv, mis kirjeldab sisendmaske;
• listKey- sisendmaski salvestava objekti sees oleva parameetri nimi;
• onMaskChange- funktsioon, mis sisendmaski uuendamisel välja kutsutakse; esimese parameetrina edastatakse massiivist objekt, mille sisestusmask vastab sisestatud tekstile ja teisena maski definitsiooni täpsus: true - sisendmask sobib täielikult, false - vaja on lisamärke maski usaldusväärseks määramiseks.

Pistikprogrammi lähtestamiseks peate sisestusväljale rakendama sisestusmaskide meetodit:
$ .fn.inputmasks = funktsioon (maskOpts, režiim)

• maskOpts- pistikprogrammi tööd kirjeldav objekt;
• režiimis- valikuline; v praegu väärtus isCompleted on toetatud – selle tulemusena tagastab meetod tõene, kui vastemaskile vastav tekst on täielikult sisestatud, ja false muul juhul.

Pistikprogrammi ühendamise näide

Sisendmask

Demonstratsioon

Väljatöötatud pistikprogrammi demonstratsiooni näide on esitatud aadressil

Esmapilgul on vastus ilmne: märkige välja "telefoninumber" vastavalt vajadusele. Kuid on nišše, kus kasutaja saab tarbetute kohustuslike väljade tõttu saidilt lahkuda. Näiteks rakendused, tarkvara, sisu müügisaidid. Selliste projektide kasutajanumbrid on aga olulised lisaandmetena, mis võimaldavad tulevikus potentsiaalsete klientidega suhelda. Pealegi on olemas lihtne ja tõhus lahendus – sisestusmaski kasutamine. Tõestame seda juhtumiuuringutega.

Miks on vaja sisendmaski?

Sisestusmask näitab, millises vormingus peate väljale andmed sisestama. Näiteks kui kasutaja sisestab telefoninumbri ilma suunakoodita või aadressiväljale telefoninumbri, ei saa ta järgmise üksuse juurde liikuda. Vormides olev mask annab sisendandmetele ühtse ilme, mis muudab andmebaasi leidmise ja haldamise lihtsamaks. Netpeaki soovitustes on telefoninumbri sisestamise mask veebisaidi tellimisvormi kohustuslik element. Nagu iga meie spetsialistide praktiline soovitus, põhineb see ametikoht edukatel kliendijuhtumitel.

Kuna sait oli spetsialiseerunud rakendustele, oli saidil numbri sisestamise väli valikuline. Et jälgida saidi tellimisvormi välja "telefon" täitvate klientide protsendi muutust, rakendasime rakenduses kohandatud muutuja. Google'i analüütika... Veebruaris ei täitnud ükski üheksast kliendist välja "telefon". Märtsis võtsime kasutusele sisestusmaski ja kasutajad hakkasid seda täitma. Katse puhtuse huvides jäeti väli valikuliseks ja muid muudatusi ei tehtud.
Märtsi tulemus – 19 probleemi 22 kasutajaga, kes täitsid avalduse. Teisisõnu jättis 85% rakenduse tellinud kasutajatest oma telefoninumbri.

Infokeskuse veebilehe juhtumiuuring: telefoninumbri välja täitmiste arvu kasv 15,4%

Kliendi sait tegeleb esseede, kursusetööde, lõputööde ja muude tööde kirjutamisega. Suhtlemiseks on soovitav kasutaja telefoninumber, kuid saidil oli see väli valikuline. Kasutaja ei saanud vormi täita ega sellele väljale midagi kirjutada. Nagu ka esimesel korral, paigaldasime esimeses etapis Google Analyticsi välja "telefon" täitmise jälgimise. Novembris saidi külastajate esitatud 59 taotlusest 15 ei sisaldanud numbreid. See tähendab, et ettevõte sai täidetud numbriga esitatud vormidest vaid 74,6%. Seejärel lisasime telefoni väljale sisestusmaski. Detsembris laekus saidile 60 avaldust. Kuid ainult 6 täidetud ankeeti ei sisaldanud kliendi telefoninumbrit. Järelikult sisaldas 90% esitatud tellimislehtedest õigesti täidetud "telefoni" välja. Kuu jooksul - kasv 15,4%, ainult numbrite sisestamise maski kasutuselevõtu tõttu. Lõpuks – asutuse sisejuhtum.

Netpeaki veebisaidi tellimisvormi numbrite väli on samuti vabatahtlik. Kuid telefoninumbrid on olulised selleks, et kliendid teaksid alati oma rakenduse numbrit ja olekut (saame need andmed SMS-iga), samuti kontohaldurite töö optimeerimiseks. Katseperiood, nagu eelmistes näidetes, on kaks kuud. Numbrite sisestamise maski ilmnemise tulemusena kasvas vormide täitmise protsent 44%-lt 83%-ni – 39,4%.
Pärast katset rakendasime saidil maski. Numbri sisestamise väli jääb valikuliseks. Taotlus ei lähe läbi ainult siis, kui sellele väljale on sisestatud vale number. Sel juhul muutuvad maski esimesed numbrid olenevalt riigist, kus saidi kasutaja asub. Kui me räägime ettetellimisvormist, siis on huvitav teada, kui palju parem on telefoninumbritega rakendus. Võtsime kõik ettetellimisvormi kaudu kunagi laekunud taotlused ja arvutasime välja nende protsendi, mis muutusid klientideks ilma numbrita ja koos sellega. Viimane osutus 0,81% võrra enim.

Väljund: kui inimene jätab teile vormile oma numbri, ei garanteeri see raha ülekandmist.

Kui räägime ettetellimise vormist, siis esiplaanil on klientide taasaktiveerimise võimalus, võimalused, mis avanevad turundajatele, kes on varustatud kasutajate isiklike telefoninumbritega. Räägime teile edukatest taasaktiveerimisjuhtudest ühes uues postituses. Seni soovitame teil enne andmebaasis olevate telefoninumbritega toiminguid läbi lugeda meetmete kohta, mida tuleks võtta. Jagage kommentaarides oma kogemusi telefoninumbrite sisestusmaski rakendamisel ja sissetulevate päringute kvaliteedi jälgimisel.