Telefonszámmaszk javafx-ben. A telefonmező maszkolása és érvényesítése a jQuery segítségével

Ez a jQuery bővítmény lehetővé teszi a megfelelő beviteli maszk automatikus kiválasztását a telefonszám beírt eleje alapján. Ezzel gyorsabbá és hibamentesebbé teheti a telefonszám megadását egy weboldalon. Emellett a kifejlesztett plugin más területeken is használható, ha a bemeneti szabályok több bemeneti maszk formájában is reprezentálhatók.

Bevezetés A webhelyek megkövetelik a telefonszámok megadását. Így történt, hogy minden országnak joga van saját tárcsázási szabályait és számhosszát megállapítani, aminek eredményeként a lakosok között különböző országok Időről időre zavarok támadnak: egyesek 8-as bevezető számjegygel, mások 0-val, megint mások + jellel szokták feltüntetni a számot, hogy valahogy megoldják a felmerült bonyolultságot és hozzuk egységes formátumba a számokat, három fő megoldás létezik:

A felhasználónak meg kell adnia a számot egy beviteli maszk segítségével. Előny: A szám egyértelmű kijelzése minimalizálja a szám lehetséges hibáit. Hátránya: minden országnak megvan a maga helyesírása és számhossza.

A felhasználónak külön válassza ki az országot, és külön adja meg a szám többi részét; beviteli maszk használatával lehetséges. Előny: különböző beviteli maszkok használata a különböző országokhoz (valamint az országon belüli régiókhoz). Hátrányok: az országok listája (és az egyes országokon belüli régiók) nagy lehet; a telefonszám egyetlen egészként megszűnik létezni (vagy előfeldolgozás szükséges a szám mentése és megjelenítése előtt).

Helyezzen egy + jelet a szám elé (a bevitelen kívül), és csak számokat írjon be. Előnyök: egyszerű kivitelezés. Hátránya: a szám vizuális megjelenítésének hiánya.

Megoldási javaslat Ennek eredményeként a szokásos beviteli maszk módosítása mellett döntöttek, hogy az a szám aktuális értékének megfelelően változzon. Ezen túlmenően a szám beírásakor a rendszer kéri, hogy jelenítse meg az azonosított ország nevét. Ennek a megközelítésnek szubjektíven meg kell oldania a fent felsorolt megoldások összes hiányosságát.

Figyelembe véve azt a tényt, hogy a világ országainak száma viszonylag kicsi, úgy döntöttek, hogy minden országra összeállítják a beviteli maszkok listáját. A honlapon közzétett információk forrásként szolgáltak nemzetközi unió távközlés.

Ezen információk összegyűjtése sok meglepetést hozott. Az információgyűjtés során minden lehetséges telefonszámot figyelembe kellett venni, így az országon belül is. A nagy mennyiségű manuálisan feldolgozott információ miatt azonban előfordulhat, hogy pontatlanságok maradtak az összegyűjtött adatbázisban. A tervek szerint idővel korrekciókat hajtanak végre a kezdeti készleten.

Szoftver-implementáció A jquery.inputmask implementációt, amelyet a Habrahabron sokszor említettek, a beviteli maszk magjaként használták. Ezt a bővítményt jelenleg aktívan fejlesztik, ráadásul úgy van megtervezve, hogy meglehetősen könnyű bővítményeket írni hozzá. Ebben a feladatban azonban szinte lehetetlennek bizonyult ilyen kiterjesztést írni. Nem módosítottam vagy írtam át az eredeti bővítményt igényeimnek megfelelően, mert... szerzője továbbra is aktívan dolgozik a funkcionalitás bővítésén, aminek következtében szerkesztéseim alkalmazása problémás lehet. Ezért a fő mag fölé kellett írnom egy plug-in kiegészítőt, ami figyeli (plusz elfogja) a külső hatásokat és adatmódosításokat végez. Annak érdekében, hogy a saját külső hatások kezelőit a fő bővítmény kezelői előtt implementáljuk, a jquery.bind-first könyvtár bővítményt használtuk. Engedélyezett beviteli maszkok rendezése A legmegfelelőbb beviteli maszk helyes kiválasztásához először a teljes maszkkészletet meg kell tenni speciális módon rendezve. A rendezési szabályok kidolgozásakor a következő konvenciókat fogadták el:

A beviteli maszk minden karaktere 2 típusra oszlik: jelentős karakterek (esetemben ez a # szimbólum, amely tetszőleges számot jelent, és számok 0-9) és díszítő karakterek (az összes többi).

A beviteli maszk karaktereinek másik felosztása a helyettesítő karakterek (esetemben ez a # szimbólum) és az összes többi.

Az eredmény a következő rendezési szabályok az alkalmazásuk sorrendjében:

2 bemeneti maszk karakterenkénti összehasonlításakor csak a jelentős karakterek (dekorátorok nem) kerülnek figyelembevételre.

A különböző helyettesítő karaktereket egyenlőnek tekinti, a többi jelentős karaktert pedig a kódjuk alapján hasonlítja össze.

A nem sablon szimbólumok mindig kisebbek, mint a sablon szimbólumok, és ennek eredményeként magasabban helyezkednek el.

Minél rövidebb a beviteli maszkban lévő jelentős karakterek hossza, annál kisebb a beviteli maszk, és annál magasabbra kerül.

Megfelelő beviteli maszk keresése A beviteli szöveg és a rendezett listából következő maszk összehasonlításakor csak az egyes maszkok jelentős karaktereit veszik figyelembe. Ha egy sor hosszabb, mint egy beviteli maszk, annak ellenére, hogy az összes előző karakter átment a teszten, a beviteli maszk érvénytelennek minősül. Ha a beviteli szöveg több beviteli maszknak egyezik, akkor az első kerül visszaadásra. Ezután a talált maszkban az összes jelentős karaktert (beleértve a nem sablonokat is) egy sablonnal helyettesítjük, amely az eseményfeldolgozás és elfogás által engedélyezett összes karakter kombinációja Az eseménnyel való ütközések elkerülése érdekében a bemeneti maszk fő kernelének kezelői a következő eseményeket fogják el:

keydown – a backspace és a törlés billentyűleütéseket figyeli, hogy megváltoztassa az aktuális beviteli maszkot, mielőtt a fő kezelő eltávolít egy karaktert a szövegből. Ezenkívül a Beszúrás gomb megnyomása, amely megváltoztatja a szövegbeviteli módot, figyeli a szinkronizálást.
gombnyomás - mivel előfordulhat, hogy az eredeti beviteli maszk nem engedélyezi a beírt karaktert (mivel az összes jelentős karaktert helyettesítő karakter helyettesíti), ellenőrizni kell az új sort, hogy megfeleljen az egyik engedélyezett maszknak. Ha nincsenek ilyen maszkok, akkor a karakterbevitelt el kell vetni, ellenkező esetben a bemeneti maszk frissítésre kerül, majd az esemény átadásra kerül a kernelkezelőnek.
beillesztés , bevitel - szöveg beillesztése a vágólapról. A feldolgozás kernelre való átvitele előtt egy beviteli maszk kerül kiválasztásra a szöveg vágólapról történő beillesztéséből származó karakterlánchoz. Ha a beviteli maszk nem található, a szöveget karakterenként vágja le a végétől egészen addig, amíg a szöveg legalább egy beviteli maszknak nem felel meg. Hasonló műveletet hajtanak végre egy beviteli mező szövegének a val() függvény hívásával történő javításakor, valamint egy beviteli maszk inicializálásakor, ha azt nem üres beviteli mezőre alkalmazzák.
dragdrop , drop - feldolgozás hasonló a beillesztési eseményhez.
blur - további feldolgozás arra az esetre, ha a szövegtörlési mód engedélyezve van, amikor a fókusz elveszik, ha nem felel meg a beviteli maszknak. Ezt az eseményt a főkezelő után a rendszer elfogja, ellentétben az előzőekkel.

Minden esemény a beviteli maszk területére kerül. Ezzel elkerülhető a helytelen viselkedés az inputmask meghívásakor a bővítmény inicializálása után (mivel a kernel inicializáláskor eltávolítja az összes korábban telepített kezelőt az inputmask térben).

Használati példa Maszklista formátum A maszklista objektumok JavaScript-tömbje, lehetőleg azonos tulajdonságkészlettel. Legalább egy, bemeneti maszkot tartalmazó tulajdonságnak jelen kell lennie minden tömbobjektumhoz. A maszkot tartalmazó paraméter neve tetszőleges lehet. Az alábbiakban egy ilyen tömb töredéke látható:
[ … ( "mask": "+7(###)###-##-##", "cc": "RU", "name_en": "Oroszország", "desc_en": "", " name_ru": "Oroszország", "desc_ru": "" ), ( "maszk": "+250(###)###-###", "cc": "RW", "name_en": " Ruanda", "desc_en": "", "name_ru": "Ruanda", "desc_ru": "" ), ( "maszk": "+966-5-####-####", "cc ": "SA", "name_en": "Szaúd-Arábia", "desc_en": "mobile", "name_ru": "Szaúd-Arábia", "desc_ru": "mobile" ), ( "mask": "+966- #-###-####", "cc": "SA", "name_en": "Szaúd-Arábia", "desc_en": "", "name_ru": "Szaúd-Arábia", "desc_ru": " " ), … ] Beépülő modul csatlakozási paraméterei Csatlakozás előtt be kell töltenie és rendeznie kell a maszkok listáját. Ez futással történik következő funkció:
$.masksSort = függvény(maskList, defs, match, key)

maskList - bemeneti maszkokat tároló objektumok tömbje (objektumtöredéket lásd fent);
defs - helyettesítő karakterek tömbje (esetemben ez a # szimbólum);
match - jelentős karaktereket leíró reguláris kifejezés (esetemben ez /|#/);
kulcs a bemeneti maszkot tartalmazó tömbobjektum paraméterének neve.

Csatlakozáskor a plugin egy speciális objektumot kap, amely leírja a működését. Ez az objektum a következő paramétereket tartalmazza:

inputmask - a fő inputmask bővítménynek átadott paramétereket tartalmazó objektum;
match - reguláris kifejezés, amely jelentős karaktereket ír le, a helyettesítő karakterek kivételével;
csere - helyettesítő karakter, amelyre az összes jelentős karakter lecserélődik; nem lehet jelen az inputmask objektum definíciós objektumában;
lista - a beviteli maszkokat leíró objektumok tömbje;
listKey - a paraméter neve a bemeneti maszkot tároló objektumon belül;
onMaskChange - a bemeneti maszk frissítésekor meghívott függvény; az első paraméter egy objektum a tömbből, melynek beviteli maszkja megfelel a beírt szövegnek, a második paraméter pedig a maszk definíciójának pontossága: igaz - a beviteli maszk teljesen megegyezik, false - további karaktereket kell megadni a megbízhatósághoz határozza meg a maszkot.

A beépülő modul inicializálásához alkalmaznia kell az inputmasks metódust a beviteli mezőben:
$.fn.inputmasks = function(maskOpts, mode)

maskOpts - a bővítmény működését leíró objektum;
mód - opcionális; jelenleg az isCompleted érték támogatott - ennek eredményeként a metódus igazat ad vissza, ha a megfelelő maszknak megfelelő szöveget teljesen beírja, egyébként pedig false-t.

Plugin csatlakozási példa
Beviteli maszk var maskList = $.masksSort($.masksLoad("phone-codes.json"), ["#"], /|#/, "maszk"); var maskOpts = ( inputmask: ( definíciók: ( "#": ( érvényesítő: "", számosság: 1 ) ), //clearIncomplete: true, showMaskOnHover: false, autoUnmask: true ), match: //, csere: "# ", lista: maskList, listKey: "mask", onMaskChange: function(maskObj, complete) ( if (completed) ( var hint = maskObj.name_ru; if (maskObj.desc_ru && maskObj.desc_ru != "") ( hint + = " (" + maskObj.desc_ru + ")"; $("#descr").html(hint) else ( $("#descr").html("Beviteli maszk"); ) $(this ) .attr("helyőrző", $(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("Beviteli maszk"); ) )); $("#phone_mask").change(); Demonstráció A kifejlesztett beépülő modul bemutatójának példája itt található

A válasz első pillantásra kézenfekvő: jelölje be a „telefonszám” mezőt igény szerint. De vannak olyan rések, amelyekben a felhasználó elhagyhatja a webhelyet a szükségtelen kötelező mezők miatt. Például alkalmazások, szoftverek, tartalom értékesítésére szolgáló webhelyek. Az ilyen projektek felhasználói száma azonban fontos kiegészítő adat, amely lehetővé teszi a potenciális ügyfelekkel való együttműködést a jövőben. Sőt, van egy egyszerű és hatékony megoldás - egy beviteli maszk használata. Bizonyítsuk be ezt esetekkel.

Miért van szüksége bemeneti maszkra?

A beviteli maszk megmutatja, hogy milyen formátumban kell adatokat bevinni a mezőbe. Például, ha a felhasználó körzetszám nélkül ír be telefonszámot vagy telefonszámot a címmezőbe, nem tud továbblépni a következő tételre. Az űrlapokon található maszk egységes megjelenést biztosít a bevitt adatoknak, ami leegyszerűsíti az adatbázis keresését és kezelését. A Netpeak ajánlásai szerint a weboldalon található megrendelőlap kötelező eleme a telefonszám beviteli maszk. Mint szakembereink minden gyakorlati ajánlása, ez is a sikeres ügyféleseteken alapul.

Mivel az oldal alkalmazásokra specializálódott, a szám megadására szolgáló mező az oldalon nem kötelező volt. A webhely megrendelőlapján a „telefon” mezőt kitöltő ügyfelek százalékos arányában bekövetkezett változások nyomon követésére egy egyéni változót használtunk a Google Analytics szolgáltatásban. Februárban a kilenc ügyfél közül senki sem töltötte ki a „telefon” mezőt. Márciusban bevezettünk egy beviteli maszkot, és a felhasználók elkezdték kitölteni. A kísérlet tisztasága érdekében a mezőt opcionálisan hagytuk, és nem történt más változtatás.
A márciusi eredmény 19 probléma volt, 22 felhasználó töltötte ki a kérelmet. Más szóval, az alkalmazást megrendelő felhasználók 85%-a elhagyta telefonszámát.

Az információs központ webhelyének esettanulmánya: a telefonszám mezőbe írt bejegyzések számának növekedése 15,4%-kal

Az ügyfél weboldala esszék, kurzusok, szakdolgozatok és egyéb művek írásához nyújt szolgáltatásokat. A felhasználó telefonszáma kívánatos a kommunikációhoz, de az oldalon ez a mező nem kötelező volt. A felhasználó nem tudta kitölteni az űrlapot, és nem írhatott semmit ebbe a mezőbe. Első alkalommal a Google Analytics „telefon” mezőjének kitöltéséhez állítottuk be a nyomkövetést. Novemberben az oldallátogatók által hagyott 59 jelentkezésből 15 nem tartalmazott számokat. Vagyis a kitöltött számú nyomtatványok mindössze 74,6%-át kapta meg a cég. Ezután hozzáadtunk egy beviteli maszkot a telefon mezőhöz. Decemberben 60 jelentkezés érkezett az oldalra. Ráadásul mindössze 6 kitöltött űrlapon nem szerepelt az ügyfél telefonszáma. Ennek megfelelően a leadott megrendelőlapok 90%-a helyesen kitöltött telefonszámot tartalmazott. A hónap során - 15,4%-os növekedés, csak a számbeviteli maszk bevezetésének köszönhetően. Végül egy belső esettanulmány az ügynökségről.

A Netpeak weboldalán található megrendelőlapon a számok mezője szintén nem kötelező. De a telefonszámok azért fontosak, hogy az ügyfelek mindig tudják a kérvényük számát és állapotát (ezeket az adatokat SMS-ben küldjük el), valamint a számlavezetők munkájának optimalizálása érdekében. A kísérleti időszak az előző példákhoz hasonlóan két hónap. A számbeviteli maszk megjelenése következtében az űrlapkitöltések aránya 44%-ról 83%-ra nőtt - 39,4%-kal.
A kísérlet után a maszkot az oldalon implementáltuk. A szám bevitelére szolgáló mező nem kötelező. A jelentkezés csak abban az esetben nem kerül feldolgozásra, ha ebbe a mezőbe hibás számot írnak be. Ebben az esetben a maszk első számjegyei a webhely felhasználójának országától függően változnak. Ha arról beszélünk az előrendelési űrlapról érdekes, hogy mennyivel jobb minőségűek a telefonszámos alkalmazások. Felvettük az előrendelési űrlapon keresztül valaha is kapott potenciális ügyfeleket, és kiszámítottuk azoknak a százalékos arányát, amelyek szám nélkül és számmal rendelkező ügyfelekké váltak. Ez utóbbi bizonyult a legtöbbnek 0,81%-kal.

Következtetés: ha valaki elhagyja a számát az űrlapon, ez nem garantálja a pénzátutalást.

Ha az előrendelési űrlapról beszélünk, akkor előtérbe kerülnek az ügyfelek újraaktiválásának lehetőségei, amelyek a felhasználók személyes telefonszámainak adatbázisával felvértezett marketingesek előtt nyílnak meg. A sikeres újraaktiválási esetekről az egyik új bejegyzésünkben fogunk beszélni. Addig is azt tanácsoljuk, hogy az adatbázisban szereplő telefonszámokkal kapcsolatos műveletek előtt olvassa el a szükséges intézkedéseket. A megjegyzésekben ossza meg tapasztalatait a telefonszámok beviteli maszkjának megvalósításával kapcsolatban, valamint a bejövő alkalmazások minőségével kapcsolatos észrevételeit.

Bevezetés A webhelyek megkövetelik a telefonszámok megadását. Előfordul, hogy minden országnak joga van saját tárcsázási szabályait és számhosszát megállapítani, aminek következtében a különböző országok lakosai között időről időre zűrzavar keletkezik: egyesek hozzászoktak ahhoz, hogy a számot egy 8-as, mások pedig a kezdő számjegyekkel jelezzék. 0 számjegy, és még mások + jellel. A meglévő megoldások áttekintése A bonyolultság valahogy megoldása és a számok egységes formátumba hozása érdekében 3 fő megoldás létezik:

Helyezzen egy + jelet a szám elé (a bevitelen kívül), és csak számokat írjon be. Előnyök: egyszerű kivitelezés. Hátránya: a szám vizuális megjelenítésének hiánya.

Figyelembe véve azt a tényt, hogy a világ országainak száma viszonylag kicsi, úgy döntöttek, hogy minden országra összeállítják a beviteli maszkok listáját. Forrásként a Nemzetközi Távközlési Unió honlapján közzétett információkat használtuk fel.

A beviteli maszk karaktereinek másik felosztása a helyettesítő karakterek (esetemben ez a # szimbólum) és az összes többi.

Az eredmény a következő rendezési szabályok az alkalmazásuk sorrendjében:

2 bemeneti maszk karakterenkénti összehasonlításakor csak a jelentős karakterek (dekorátorok nem) kerülnek figyelembevételre.

A különböző helyettesítő karaktereket egyenlőnek tekinti, a többi jelentős karaktert pedig a kódjuk alapján hasonlítja össze.

A nem sablon szimbólumok mindig kisebbek, mint a sablon szimbólumok, és ennek eredményeként magasabban helyezkednek el.

Minél rövidebb a beviteli maszkban lévő jelentős karakterek hossza, annál kisebb a beviteli maszk, és annál magasabbra kerül.

keydown – a backspace és a törlés billentyűleütéseket figyeli, hogy megváltoztassa az aktuális beviteli maszkot, mielőtt a fő kezelő eltávolít egy karaktert a szövegből. Ezenkívül a Beszúrás gomb megnyomása, amely megváltoztatja a szövegbeviteli módot, figyeli a szinkronizálást.
gombnyomás - mivel előfordulhat, hogy az eredeti beviteli maszk nem engedélyezi a beírt karaktert (mivel az összes jelentős karaktert helyettesítő karakter helyettesíti), ellenőrizni kell az új sort, hogy megfeleljen az egyik engedélyezett maszknak. Ha nincsenek ilyen maszkok, akkor a karakterbevitelt el kell vetni, ellenkező esetben a bemeneti maszk frissítésre kerül, majd az esemény átadásra kerül a kernelkezelőnek.
beillesztés , bevitel - szöveg beillesztése a vágólapról. A feldolgozás kernelre való átvitele előtt egy beviteli maszk kerül kiválasztásra a szöveg vágólapról történő beillesztéséből származó karakterlánchoz. Ha a beviteli maszk nem található, a szöveget karakterenként vágja le a végétől egészen addig, amíg a szöveg legalább egy beviteli maszknak nem felel meg. Hasonló műveletet hajtanak végre egy beviteli mező szövegének a val() függvény hívásával történő javításakor, valamint egy beviteli maszk inicializálásakor, ha azt nem üres beviteli mezőre alkalmazzák.
dragdrop , drop - feldolgozás hasonló a beillesztési eseményhez.
blur - további feldolgozás arra az esetre, ha a szövegtörlési mód engedélyezve van, amikor a fókusz elveszik, ha nem felel meg a beviteli maszknak. Ezt az eseményt a főkezelő után a rendszer elfogja, ellentétben az előzőekkel.

Használati példa Maszklista formátum A maszklista objektumok JavaScript-tömbje, lehetőleg azonos tulajdonságkészlettel. Legalább egy, bemeneti maszkot tartalmazó tulajdonságnak jelen kell lennie minden tömbobjektumhoz. A maszkot tartalmazó paraméter neve tetszőleges lehet. Az alábbiakban egy ilyen tömb töredéke látható:
[ … ( "mask": "+7(###)###-##-##", "cc": "RU", "name_en": "Oroszország", "desc_en": "", " name_ru": "Oroszország", "desc_ru": "" ), ( "maszk": "+250(###)###-###", "cc": "RW", "name_en": " Ruanda", "desc_en": "", "name_ru": "Ruanda", "desc_ru": "" ), ( "maszk": "+966-5-####-####", "cc ": "SA", "name_en": "Szaúd-Arábia", "desc_en": "mobile", "name_ru": "Szaúd-Arábia", "desc_ru": "mobile" ), ( "mask": "+966- #-###-####", "cc": "SA", "name_en": "Szaúd-Arábia", "desc_en": "", "name_ru": "Szaúd-Arábia", "desc_ru": " " ), … ] Beépülő modul csatlakozási paraméterei Csatlakozás előtt be kell töltenie és rendeznie kell a maszkok listáját. Ez a következő függvény végrehajtásával történik:
$.masksSort = függvény(maskList, defs, match, key)

maskList - bemeneti maszkokat tároló objektumok tömbje (objektumtöredéket lásd fent);
defs - helyettesítő karakterek tömbje (esetemben ez a # szimbólum);
match - jelentős karaktereket leíró reguláris kifejezés (esetemben ez /|#/);
kulcs a bemeneti maszkot tartalmazó tömbobjektum paraméterének neve.

Csatlakozáskor a plugin egy speciális objektumot kap, amely leírja a működését. Ez az objektum a következő paramétereket tartalmazza:

inputmask - a fő inputmask bővítménynek átadott paramétereket tartalmazó objektum;
match - reguláris kifejezés, amely jelentős karaktereket ír le, a helyettesítő karakterek kivételével;
csere - helyettesítő karakter, amelyre az összes jelentős karakter lecserélődik; nem lehet jelen az inputmask objektum definíciós objektumában;
lista - a beviteli maszkokat leíró objektumok tömbje;
listKey - a paraméter neve a bemeneti maszkot tároló objektumon belül;
onMaskChange - a bemeneti maszk frissítésekor meghívott függvény; az első paraméter egy objektum a tömbből, melynek beviteli maszkja megfelel a beírt szövegnek, a második paraméter pedig a maszk definíciójának pontossága: igaz - a beviteli maszk teljesen megegyezik, false - további karaktereket kell megadni a megbízhatósághoz határozza meg a maszkot.

A beépülő modul inicializálásához alkalmaznia kell az inputmasks metódust a beviteli mezőben:
$.fn.inputmasks = function(maskOpts, mode)

maskOpts - a bővítmény működését leíró objektum;
mód - opcionális; jelenleg az isCompleted érték támogatott - ennek eredményeként a metódus igazat ad vissza, ha a megfelelő maszknak megfelelő szöveget teljesen beírja, egyébként pedig false-t.