Denna jQuery-plugin låter dig automatiskt välja lämplig ingångsmask baserat på den angivna början av telefonnumret. Detta gör att du kan ange ett telefonnummer på en webbsida snabbare och mer felfritt. Dessutom kan det utvecklade pluginet användas inom andra områden om inmatningsreglerna kan representeras i form av flera ingångsmasker.

Inledning Webbplatser kräver att man anger telefonnummerinformation. Det hände så att varje land har rätt att fastställa sina egna uppringningsregler och nummerlängd, vilket leder till mellan invånare olika länder Då och då uppstår förvirring: vissa är vana vid att ange siffran med en inledande siffra 8, andra med en inledande siffra 0, och ytterligare andra med ett +-tecken Granskning av befintliga lösningar för att på något sätt lösa komplexiteten som har uppstått och föra siffrorna till ett enhetligt format, det finns tre huvudsakliga lösningar:

Användaren uppmanas att ange numret med hjälp av en inmatningsmask. Fördel: Den tydliga visningen av numret minimerar möjliga fel i numret. Nackdel: varje land har sin egen stavning och sifferlängd.

Användaren uppmanas att välja land separat och ange resten av numret separat; möjligt med en ingångsmask. Fördel: möjligheten att använda olika inmatningsmasker för olika länder (liksom regioner inom ett land). Nackdelar: listan över länder (och regioner inom varje land) kan vara stor; telefonnumret upphör att existera som en helhet (eller förbearbetning krävs innan du sparar och visar numret).

Placera ett +-tecken framför numret (utanför inmatningen) och låt endast siffror anges. Fördelar: enkel implementering. Nackdel: brist på visuell visning av numret.

Förslag till lösning Som ett resultat av detta beslutades det att modifiera den vanliga ingångsmasken så att den ändras i enlighet med numrets nuvarande värde. Dessutom, när du anger numret, uppmanas du att visa namnet på det identifierade landet. Detta tillvägagångssätt, subjektivt, bör lösa alla brister i lösningarna som anges ovan.

Med hänsyn till det faktum att antalet länder i världen är relativt litet, beslutades det att sammanställa en lista med inmatningsmasker för alla länder. Information som publicerades på webbplatsen användes som källa internationella unionen telekommunikation.

Insamlingen av denna information väckte många överraskningar. I processen för att samla in information var det nödvändigt att ta hänsyn till alla möjliga alternativ för telefonnummer, inklusive inom landet. Men på grund av den stora mängden manuellt bearbetad information är det möjligt att felaktigheter finns kvar i den insamlade databasen. Det är planerat att göra korrigeringar av den initiala uppsättningen med tiden.

Mjukvaruimplementering Implementeringen av jquery.inputmask, som nämndes många gånger på Habrahabr, användes som kärnan i inmatningsmasken. Denna plugin utvecklas för närvarande aktivt och är dessutom utformad på ett sådant sätt att det är ganska enkelt att skriva tillägg för det. Men i detta problem visade det sig vara nästan omöjligt att skriva en sådan förlängning. Jag har inte ändrat eller skrivit om det ursprungliga plugin-programmet för att passa mina behov, eftersom... dess författare fortsätter att aktivt arbeta med att utöka funktionaliteten, vilket gör att tillämpningen av mina redigeringar kan vara problematisk. Därför var jag tvungen att skriva ett plug-in-tillägg över huvudkärnan, som övervakar (plus fångar upp) yttre påverkan och gör datamodifieringar. För att implementera våra egna hanterare för extern påverkan före hanterarna av huvudpluginen, använde vi bibliotekspluginen jquery.bind-first Sortera tillåtna inmatningsmasker För att korrekt välja den mest lämpliga ingångsmasken måste hela uppsättningen av masker först sorteras på ett speciellt sätt. När man utvecklade sorteringsregler antogs följande konventioner:

Alla tecken i inmatningsmasken är indelade i 2 typer: signifikanta tecken (i mitt fall är detta #-symbolen, vilket betyder ett godtyckligt tal, och siffrorna 0-9) och dekorativa tecken (alla andra).

En annan uppdelning av tecken i inmatningsmasken är jokertecken (i mitt fall är detta #-symbolen) och alla andra.

Resultatet är följande sorteringsregler i den ordning som de tillämpas:

När man jämför 2 inmatningsmasker tecken-för-tecken, beaktas endast signifikanta tecken (inte dekoratörer).

Olika jokertecken behandlas som lika, och andra betydande tecken jämförs baserat på deras kod.

Icke-mallsymboler är alltid mindre än mallsymboler och är som ett resultat placerade högre.

Ju kortare längden av signifikanta tecken i inmatningsmasken är, desto mindre anses inmatningsmasken och är placerad högre.

Hitta en lämplig inmatningsmask När man jämför inmatningstexten med nästa mask från den sorterade listan, tas endast hänsyn till de signifikanta tecknen i varje mask. Om en rad är längre än en inmatningsmask trots att alla föregående tecken har klarat testet, anses inmatningsmasken vara ogiltig. Om inmatningstexten matchar flera inmatningsmasker, returneras den första. Därefter, i den hittade masken, ersätts alla betydelsefulla tecken (inklusive icke-mall) med en mall, som är en kombination av alla tecken som tillåts av någon av mallens tecken Händelsebearbetning och avlyssning för att förhindra konflikter med händelse hanterare av huvudkärnan i inmatningsmasken, fångas upp följande händelser:

• tangentnedtryckning - bakåtsteg och borttagning av tangenttryckningar övervakas för att ändra den aktuella inmatningsmasken innan huvudhanteraren tar bort ett tecken från texten. Dessutom övervakas synkronisering genom att trycka på knappen Insert, vilket ändrar textinmatningsläget.
• tangenttryckning - eftersom det inmatade tecknet kanske inte tillåts av den ursprungliga inmatningsmasken (eftersom alla signifikanta tecken i den ersätts av ett jokertecken), är det nödvändigt att kontrollera den nya raden för att tillfredsställa en av de tillåtna maskerna. Om det inte finns några sådana masker, kasseras teckeninmatningen, annars uppdateras inmatningsmasken, varefter händelsen skickas till kärnhanteraren.
• klistra in, mata in - klistra in text från urklipp. Innan bearbetning överförs till kärnan, väljs en inmatningsmask för strängen som kommer från inklistring av text från urklipp. Om inmatningsmasken inte kan hittas trimmas texten tecken för tecken från slutet tills texten matchar minst en inmatningsmask. En liknande operation utförs vid korrigering av text i ett inmatningsfält genom att anropa val()-funktionen, samt vid initialisering av en inmatningsmask om den tillämpas på ett icke-tomt inmatningsfält.
• dragdrop , drop-bearbetning liknar klistrahändelsen.
• oskärpa - ytterligare bearbetning om textrensningsläget är aktiverat när fokus tappas om det inte uppfyller inmatningsmasken. Denna händelse fångas upp efter huvudhanteraren, till skillnad från de tidigare.

Alla händelser hängs i inmatningsmaskutrymmet. Detta undviker felaktigt beteende vid anrop av inputmask efter att tillägget har initierats (eftersom kärnan tar bort alla tidigare installerade hanterare i inputmask-utrymmet vid initiering).

Användningsexempel Masklistformat En masklista är en JavaScript-matris av objekt, helst med samma uppsättning egenskaper. Minst en egenskap som innehåller en indatamask måste finnas för alla arrayobjekt. Namnet på parametern som innehåller masken kan vara godtyckligt. Nedan är ett fragment av en sådan array:
[ … ( "mask": "+7(###)###-##-##", "cc": "RU", "name_en": "Ryssland", "desc_en": "", " name_ru": "Ryssland", "desc_ru": "" ), ( "mask": "+250(###)###-###", "cc": "RW", "name_en": " Rwanda", "desc_en": "", "name_ru": "Rwanda", "desc_ru": "" ), ( "mask": "+966-5-####-####", "cc ": "SA", "name_en": "Saudiarabien", "desc_en": "mobil", "name_ru": "Saudiarabien", "desc_ru": "mobil" ), ( "mask": "+966- #-###-####", "cc": "SA", "name_en": "Saudiarabien", "desc_en": "", "name_ru": "Saudiarabien", "desc_ru": " " ), ... ] Plugin-anslutningsparametrar Innan du ansluter måste du ladda och sortera listan med masker. Detta görs genom att springa nästa funktion:
$.masksSort = function(maskList, defs, match, key)

• maskList - en array av objekt som lagrar inmatningsmasker (objektfragment se ovan);
• defs - en uppsättning jokertecken (i mitt fall är det #-symbolen);
• match - ett reguljärt uttryck som beskriver signifikanta tecken (i mitt fall är detta /|#/);
• key är namnet på parametern för arrayobjektet som innehåller inmatningsmasken.

När plugin är ansluten ges ett speciellt objekt som beskriver dess funktion. Detta objekt innehåller följande uppsättning parametrar:

• inputmask - ett objekt som innehåller parametrar som skickas till huvudinmatningsmaskplugin;
• match - ett reguljärt uttryck som beskriver signifikanta tecken, exklusive jokertecken;
• ersätt - ett jokertecken till vilket alla viktiga tecken kommer att ersättas; kanske inte finns i definitionsobjektet för inputmask-objektet;
• lista - en array av objekt som beskriver inmatningsmasker;
• listKey - namnet på parametern inuti objektet som lagrar inmatningsmasken;
• onMaskChange - en funktion som anropas när inmatningsmasken uppdateras; den första parametern är ett objekt från arrayen, vars inmatningsmask motsvarar den inmatade texten, och den andra parametern är noggrannheten i maskdefinitionen: sant - inmatningsmasken matchar fullständigt, falskt - ytterligare tecken måste matas in för att tillförlitligt definiera masken.

För att initiera plugin-programmet måste du tillämpa metoden inputmasks på inmatningsfältet:
$.fn.inputmasks = function(maskOpts, mode)

• maskOpts - ett objekt som beskriver insticksprogrammets funktion;
• läge - valfritt; för närvarande stöds värdet isCompleted - som ett resultat returnerar metoden true om texten som motsvarar den matchande masken skrivs in helt och falskt annars.

Exempel på plugin-anslutning
Indatamask var maskList = $.masksSort($.masksLoad("phone-codes.json"), ["#"], /|#/, "mask"); var maskOpts = ( inputmask: ( definitioner: ( "#": ( validator: "", kardinalitet: 1 ) ), //clearIncomplete: true, showMaskOnHover: false, autoUnmask: true ), match: //, replace: "# ", list: maskList, listKey: "mask", onMaskChange: function(maskObj, completed) ( if (completed) ( var hint = maskObj.name_ru; if (maskObj.desc_ru && maskObj.desc_ru != "") ( hint + = " (" + maskObj.desc_ru + ")" ) $("#descr").html(hint else ( $("#descr").html("Input mask"); ) $(this ) .attr("platshållare", $(this).inputmask("getemptymask") ); $("#phone_mask").change(function() ( if ($("#phone_mask").is(":checked")) ( $("#customer_phone").inputmasks(maskOpts); ) else ( $ ("#customer_phone").inputmask("+[###################]", maskOpts.inputmask) .attr("platshållare", $("# customer_phone").inputmask("getemptymask")); $("#descr").html("Indatamask"); ) )); $("#telefonmask").change(); Demonstration Ett exempel på en demonstration av det utvecklade pluginet presenteras på

Vid första anblicken är svaret uppenbart: markera fältet "telefonnummer" efter behov. Men det finns nischer där en användare kan lämna webbplatsen på grund av onödiga obligatoriska fält. Till exempel applikationer, mjukvara, webbplatser för att sälja innehåll. Användarsiffror för sådana projekt är dock viktiga som ytterligare data som gör det möjligt att interagera med potentiella kunder i framtiden. Dessutom finns det en enkel och effektiv lösning - att använda en inmatningsmask. Låt oss bevisa detta med fall.

Varför behöver du en ingångsmask?

Inmatningsmasken visar i vilket format du behöver ange data i fältet. Till exempel, om en användare anger ett telefonnummer utan ett riktnummer eller ett telefonnummer i adressfältet, kommer de inte att kunna gå vidare till nästa post. Masken i formulären ger ett enhetligt utseende av de inmatade uppgifterna, vilket förenklar sökning och hantering av databasen. Enligt Netpeak rekommendationer är en inmatningsmask för telefonnummer ett obligatoriskt element i beställningsformuläret på webbplatsen. Liksom alla praktiska rekommendationer från våra specialister är denna bestämmelse baserad på framgångsrika kundfall.

Eftersom webbplatsen var specialiserad på applikationer var fältet för att ange ett nummer på webbplatsen valfritt. För att spåra förändringar i andelen kunder som fyller i "telefon"-fältet på beställningsformuläret på webbplatsen, använde vi en anpassad variabel i Google Analytics. I februari fyllde ingen av de nio kunderna i fältet "telefon". I mars introducerade vi en inmatningsmask och användare började fylla i den. För experimentets renhet lämnades fältet valfritt och inga andra ändringar gjordes.
Resultatet för mars blev 19 nummer med 22 användare som fyllde i ansökan. Med andra ord lämnade 85 % av användarna som beställde applikationen sitt telefonnummer.

Fallstudie för informationscentrets webbplats: ökning av antalet inmatningar av telefonnummerfält med 15,4 %

Kundens webbplats tillhandahåller tjänster för att skriva uppsatser, kurser, avhandlingar och andra arbeten. Användarens telefonnummer är önskvärt för kommunikation, men på webbplatsen var detta fält valfritt. Användaren kunde inte fylla i formuläret eller skriva något i detta fält. Som första gången satte vi i det första skedet upp spårning för att fylla i "telefon"-fältet i Google Analytics. I november, av 59 ansökningar som lämnats av webbplatsbesökare, innehöll 15 inga siffror. Det vill säga att företaget fick endast 74,6 % av inlämnade blanketter med ifyllt antal. Vi lade sedan till en inmatningsmask i telefonfältet. I december fick sajten in 60 ansökningar. Dessutom innehöll endast sex ifyllda formulär inte kundens telefonnummer. Följaktligen innehöll 90 % av beställningsformulären ett korrekt ifyllt telefonfält. Under månaden - en ökning med 15,4%, bara tack vare införandet av en nummerinmatningsmask. Slutligen en intern fallstudie av byrån.

Fältet för nummer i beställningsformuläret på Netpeaks hemsida är också valfritt. Men telefonnummer är viktiga så att kunderna alltid vet numret och statusen för sin ansökan (vi skickar denna data via SMS), samt för att optimera kontoansvarigas arbete. Experimentperioden, som i tidigare exempel, är två månader. Som ett resultat av uppkomsten av nummerinmatningsmasken ökade andelen ifyllda formulär från 44 % till 83 % - med 39,4 %.
Efter experimentet implementerade vi masken på webbplatsen. Fältet för att ange ett nummer är fortfarande valfritt. Ansökan kommer inte att behandlas endast om ett felaktigt nummer anges i detta fält. I det här fallet ändras de första siffrorna i masken beroende på i vilket land webbplatsanvändaren befinner sig. Om vi pratar om om förbeställningsformuläret är det intressant att veta hur mycket bättre kvalitet applikationer med telefonnummer är. Vi tog alla leads som någonsin mottagits genom förbeställningsformuläret och beräknade andelen av de som omvandlades till kunder utan och med ett nummer. Den senare visade sig vara mest med 0,81 %.

Slutsats: om en person lämnar dig sitt nummer på formuläret, garanterar detta inte överföringen av medel.

Om vi ​​pratar om förbeställningsformuläret kommer möjligheterna att återaktivera kunder fram, möjligheter som öppnar sig för marknadsförare beväpnade med en databas med användarnas personliga telefonnummer. Vi kommer att prata om framgångsrika återaktiveringsfall i ett av våra nya inlägg. Under tiden råder vi dig att läsa om vilka åtgärder som bör vidtas innan eventuella åtgärder med telefonnummer i databasen. Dela i kommentarerna din erfarenhet av att implementera en inmatningsmask för telefonnummer och dina observationer om kvaliteten på inkommande applikationer.

Denna jQuery-plugin låter dig automatiskt välja lämplig ingångsmask baserat på den angivna början av telefonnumret. Detta gör att du kan ange ett telefonnummer på en webbsida snabbare och mer felfritt. Dessutom kan det utvecklade pluginet användas inom andra områden om inmatningsreglerna kan representeras i form av flera ingångsmasker.

Inledning Webbplatser kräver att man anger telefonnummerinformation. Det händer att varje land har rätt att fastställa sina egna uppringningsregler och nummerlängd, vilket resulterar i att förvirring periodvis uppstår mellan invånare i olika länder: vissa är vana vid att ange numret med en inledande siffra 8, andra med en inledande siffra siffran 0, och ytterligare andra med ett +-tecken Granska befintliga lösningar För att på något sätt lösa komplexiteten och få siffrorna till ett enhetligt format, finns det tre huvudlösningar:

Användaren uppmanas att ange numret med hjälp av en inmatningsmask. Fördel: Den tydliga visningen av numret minimerar möjliga fel i numret. Nackdel: varje land har sin egen stavning och sifferlängd.

Användaren uppmanas att välja land separat och ange resten av numret separat; möjligt med en ingångsmask. Fördel: möjligheten att använda olika inmatningsmasker för olika länder (liksom regioner inom ett land). Nackdelar: listan över länder (och regioner inom varje land) kan vara stor; telefonnumret upphör att existera som en helhet (eller förbearbetning krävs innan du sparar och visar numret).

Placera ett +-tecken framför numret (utanför inmatningen) och låt endast siffror anges. Fördelar: enkel implementering. Nackdel: brist på visuell visning av numret.

Förslag till lösning Som ett resultat av detta beslutades det att modifiera den vanliga ingångsmasken så att den ändras i enlighet med numrets nuvarande värde. Dessutom, när du anger numret, uppmanas du att visa namnet på det identifierade landet. Detta tillvägagångssätt, subjektivt, bör lösa alla brister i lösningarna som anges ovan.

Med hänsyn till det faktum att antalet länder i världen är relativt litet, beslutades det att sammanställa en lista med inmatningsmasker för alla länder. Information som publicerades på International Telecommunication Unions webbplats användes som källa.

Insamlingen av denna information väckte många överraskningar. I processen för att samla in information var det nödvändigt att ta hänsyn till alla möjliga alternativ för telefonnummer, inklusive inom landet. Men på grund av den stora mängden manuellt bearbetad information är det möjligt att felaktigheter finns kvar i den insamlade databasen. Det är planerat att göra korrigeringar av den initiala uppsättningen med tiden.

Mjukvaruimplementering Implementeringen av jquery.inputmask, som nämndes många gånger på Habrahabr, användes som kärnan i inmatningsmasken. Denna plugin utvecklas för närvarande aktivt och är dessutom utformad på ett sådant sätt att det är ganska enkelt att skriva tillägg för det. Men i detta problem visade det sig vara nästan omöjligt att skriva en sådan förlängning. Jag har inte ändrat eller skrivit om det ursprungliga plugin-programmet för att passa mina behov, eftersom... dess författare fortsätter att aktivt arbeta med att utöka funktionaliteten, vilket gör att tillämpningen av mina redigeringar kan vara problematisk. Därför var jag tvungen att skriva ett plug-in-tillägg över huvudkärnan, som övervakar (plus fångar upp) yttre påverkan och gör datamodifieringar. För att implementera våra egna hanterare för extern påverkan före hanterarna av huvudpluginen, använde vi bibliotekspluginen jquery.bind-first Sortera tillåtna inmatningsmasker För att korrekt välja den mest lämpliga ingångsmasken måste hela uppsättningen av masker först sorteras på ett speciellt sätt. När man utvecklade sorteringsregler antogs följande konventioner:

Alla tecken i inmatningsmasken är indelade i 2 typer: signifikanta tecken (i mitt fall är detta #-symbolen, vilket betyder ett godtyckligt tal, och siffrorna 0-9) och dekorativa tecken (alla andra).

En annan uppdelning av tecken i inmatningsmasken är jokertecken (i mitt fall är detta #-symbolen) och alla andra.

Resultatet är följande sorteringsregler i den ordning som de tillämpas:

När man jämför 2 inmatningsmasker tecken-för-tecken, beaktas endast signifikanta tecken (inte dekoratörer).

Olika jokertecken behandlas som lika, och andra betydande tecken jämförs baserat på deras kod.

Icke-mallsymboler är alltid mindre än mallsymboler och är som ett resultat placerade högre.

Ju kortare längden av signifikanta tecken i inmatningsmasken är, desto mindre anses inmatningsmasken och är placerad högre.

Hitta en lämplig inmatningsmask När man jämför inmatningstexten med nästa mask från den sorterade listan, tas endast hänsyn till de signifikanta tecknen i varje mask. Om en rad är längre än en inmatningsmask trots att alla föregående tecken har klarat testet, anses inmatningsmasken vara ogiltig. Om inmatningstexten matchar flera inmatningsmasker, returneras den första. Därefter, i den hittade masken, ersätts alla betydelsefulla tecken (inklusive icke-mall) med en mall, som är en kombination av alla tecken som tillåts av någon av mallens tecken Händelsebearbetning och avlyssning för att förhindra konflikter med händelse hanterare av huvudkärnan i inmatningsmasken, fångas upp följande händelser:

• tangentnedtryckning - bakåtsteg och borttagning av tangenttryckningar övervakas för att ändra den aktuella inmatningsmasken innan huvudhanteraren tar bort ett tecken från texten. Dessutom övervakas synkronisering genom att trycka på knappen Insert, vilket ändrar textinmatningsläget.
• tangenttryckning - eftersom det inmatade tecknet kanske inte tillåts av den ursprungliga inmatningsmasken (eftersom alla signifikanta tecken i den ersätts av ett jokertecken), är det nödvändigt att kontrollera den nya raden för att tillfredsställa en av de tillåtna maskerna. Om det inte finns några sådana masker, kasseras teckeninmatningen, annars uppdateras inmatningsmasken, varefter händelsen skickas till kärnhanteraren.
• klistra in, mata in - klistra in text från urklipp. Innan bearbetning överförs till kärnan, väljs en inmatningsmask för strängen som kommer från inklistring av text från urklipp. Om inmatningsmasken inte kan hittas trimmas texten tecken för tecken från slutet tills texten matchar minst en inmatningsmask. En liknande operation utförs vid korrigering av text i ett inmatningsfält genom att anropa val()-funktionen, samt vid initialisering av en inmatningsmask om den tillämpas på ett icke-tomt inmatningsfält.
• dragdrop , drop-bearbetning liknar klistrahändelsen.
• oskärpa - ytterligare bearbetning om textrensningsläget är aktiverat när fokus tappas om det inte uppfyller inmatningsmasken. Denna händelse fångas upp efter huvudhanteraren, till skillnad från de tidigare.

Alla händelser hängs i inmatningsmaskutrymmet. Detta undviker felaktigt beteende vid anrop av inputmask efter att tillägget har initierats (eftersom kärnan tar bort alla tidigare installerade hanterare i inputmask-utrymmet vid initiering).

Användningsexempel Masklistformat En masklista är en JavaScript-matris av objekt, helst med samma uppsättning egenskaper. Minst en egenskap som innehåller en indatamask måste finnas för alla arrayobjekt. Namnet på parametern som innehåller masken kan vara godtyckligt. Nedan är ett fragment av en sådan array:
[ … ( "mask": "+7(###)###-##-##", "cc": "RU", "name_en": "Ryssland", "desc_en": "", " name_ru": "Ryssland", "desc_ru": "" ), ( "mask": "+250(###)###-###", "cc": "RW", "name_en": " Rwanda", "desc_en": "", "name_ru": "Rwanda", "desc_ru": "" ), ( "mask": "+966-5-####-####", "cc ": "SA", "name_en": "Saudiarabien", "desc_en": "mobil", "name_ru": "Saudiarabien", "desc_ru": "mobil" ), ( "mask": "+966- #-###-####", "cc": "SA", "name_en": "Saudiarabien", "desc_en": "", "name_ru": "Saudiarabien", "desc_ru": " " ), ... ] Plugin-anslutningsparametrar Innan du ansluter måste du ladda och sortera listan med masker. Detta görs genom att utföra följande funktion:
$.masksSort = function(maskList, defs, match, key)

• maskList - en array av objekt som lagrar inmatningsmasker (objektfragment se ovan);
• defs - en uppsättning jokertecken (i mitt fall är det #-symbolen);
• match - ett reguljärt uttryck som beskriver signifikanta tecken (i mitt fall är detta /|#/);
• key är namnet på parametern för arrayobjektet som innehåller inmatningsmasken.

När plugin är ansluten ges ett speciellt objekt som beskriver dess funktion. Detta objekt innehåller följande uppsättning parametrar:

• inputmask - ett objekt som innehåller parametrar som skickas till huvudinmatningsmaskplugin;
• match - ett reguljärt uttryck som beskriver signifikanta tecken, exklusive jokertecken;
• ersätt - ett jokertecken till vilket alla viktiga tecken kommer att ersättas; kanske inte finns i definitionsobjektet för inputmask-objektet;
• lista - en array av objekt som beskriver inmatningsmasker;
• listKey - namnet på parametern inuti objektet som lagrar inmatningsmasken;
• onMaskChange - en funktion som anropas när inmatningsmasken uppdateras; den första parametern är ett objekt från arrayen, vars inmatningsmask motsvarar den inmatade texten, och den andra parametern är noggrannheten i maskdefinitionen: sant - inmatningsmasken matchar fullständigt, falskt - ytterligare tecken måste matas in för att tillförlitligt definiera masken.

För att initiera plugin-programmet måste du tillämpa metoden inputmasks på inmatningsfältet:
$.fn.inputmasks = function(maskOpts, mode)

• maskOpts - ett objekt som beskriver insticksprogrammets funktion;
• läge - valfritt; för närvarande stöds värdet isCompleted - som ett resultat returnerar metoden true om texten som motsvarar den matchande masken skrivs in helt och falskt annars.

Exempel på plugin-anslutning
Indatamask var maskList = $.masksSort($.masksLoad("phone-codes.json"), ["#"], /|#/, "mask"); var maskOpts = ( inputmask: ( definitioner: ( "#": ( validator: "", kardinalitet: 1 ) ), //clearIncomplete: true, showMaskOnHover: false, autoUnmask: true ), match: //, replace: "# ", list: maskList, listKey: "mask", onMaskChange: function(maskObj, completed) ( if (completed) ( var hint = maskObj.name_ru; if (maskObj.desc_ru && maskObj.desc_ru != "") ( hint + = " (" + maskObj.desc_ru + ")" ) $("#descr").html(hint else ( $("#descr").html("Input mask"); ) $(this ) .attr("platshållare", $(this).inputmask("getemptymask") ); $("#phone_mask").change(function() ( if ($("#phone_mask").is(":checked")) ( $("#customer_phone").inputmasks(maskOpts); ) else ( $ ("#customer_phone").inputmask("+[###################]", maskOpts.inputmask) .attr("platshållare", $("# customer_phone").inputmask("getemptymask")); $("#descr").html("Indatamask"); ) )); $("#telefonmask").change(); Demonstration Ett exempel på en demonstration av det utvecklade pluginet presenteras på

Liknande artiklar