Mascherine Js per telefoni. Mascheriamo e controlliamo il campo telefono utilizzando jQuery. Serve immediatamente una maschera

Golovna / Zakhista

A prima vista la risposta è ovvia: inserire il campo del numero di telefono come requisito di backup. Ci sono anche alcuni luoghi in cui gli utenti possono firmare dal sito attraverso i campi dell'applicazione. Ad esempio, programmi, software, siti Web per la vendita di contenuti. Tuttavia, il numero dei clienti per tali progetti è importante in quanto informazione aggiuntiva che consente la possibilità di interazione con potenziali clienti in futuro. Del resto è chiaro che la soluzione più semplice ed efficace sia l’utilizzo della mascherina. Parliamo dei casi.

Perché è necessaria la maschera?

La maschera di input mostra quale formato richiede l'inserimento dei dati nel campo. Ad esempio, se inserisci un numero di telefono senza codice di posizione o un numero di telefono nel campo dell'indirizzo, non sarai in grado di raggiungere la posizione desiderata. La maschera del modulo fornirà una visualizzazione uno a uno dei dati, semplificando la ricerca e la gestione del database. Secondo le raccomandazioni di Netpeak, la maschera per l'inserimento del numero di telefono è un elemento obbligatorio del modulo d'ordine sul sito. Tuttavia, le raccomandazioni pratiche dei nostri manager si basano su casi di clienti di successo.

Poiché il sito era specializzato in programmi, era obbligatorio il campo per l'inserimento di un numero nel sito. Per rendere possibile il cambiamento, un centinaio di clienti che hanno compilato il campo “telefono” nel modulo d'ordine sul sito, si sono registrati per modificare l'account in Google Analytics. Il campo "telefono" non è stato compilato nel login di nove acquirenti. Alle betulle furono regalate le maschere e le donne iniziarono a indossarle. Per la purezza dell'esperimento, il campo è stato privato della gomma necessaria per il riempimento e non sono state apportate altre modifiche.
Il risultato per Berezen è di 19 numeri con 22 sostenitori che hanno compilato la domanda. In altre parole, l'85% dei clienti che hanno perso il programma hanno perso il proprio numero di telefono.

Caso del sito web del Centro informazioni: aumento del 15,4% del numero di registrazioni nel campo del numero di telefono

Il sito Web del cliente fornisce servizi per la scrittura di saggi, corsi, dissertazioni e altri lavori. Il numero di telefono del corrispondente è necessario per essere contattato, ma sul sito questo campo non era obbligatorio. Koristuvach potrebbe non ricordare il modulo o non scrivere nulla in questo campo. Come prima, nella prima fase abbiamo installato un'opzione per compilare il campo "telefono" in Google Analytics. Nell'elenco delle 59 applicazioni bloccate dal sito, 15 non avevano numeri. Pertanto, l'azienda ha rifiutato solo il 74,6% dei moduli presentati con un numero di registrazione. Poi abbiamo aggiunto una maschera per entrare nel campo del telefono. Il sito web ha ricevuto 60 candidature. In questo caso, 6 moduli compilati non sono stati inclusi nel numero di telefono del cliente. Inoltre, il 90% dei moduli di pagamento inviati hanno compilato correttamente il campo del telefono. Nel corso del mese - un aumento del 15,4% dopo aver inserito la maschera numerica. Nasamkinets è un caso interno dell'agenzia.

È richiesto anche il campo numerico nel modulo d'ordine sul sito Web Netpeak. Tutti i numeri di telefono sono importanti affinché i clienti conoscano sempre il numero e lo stato della loro richiesta (ci affidiamo ai dati SMS), nonché per ottimizzare il lavoro degli account manager. La durata dell'esperimento, come nei mozziconi avanzati, è di due mesi. Durante la guerra apparvero le maschere per inserire i numeri, compilando centinaia di moduli dal 44% all'83% - 39,4%.
Dopo l'esperimento, abbiamo inviato la maschera al sito web. Il campo per l'inserimento del numero non è più obbligatorio. Se nel campo viene inserito un numero errato la domanda non verrà elaborata. In questo caso, le prime cifre della massa cambiano posizione sul bordo, dove si trovano sul sito web. Se parliamo della forma di pagamento anticipato, è importante sapere quanto sia chiara la richiesta con i numeri di telefono. Abbiamo preso tutte le domande ricevute tramite il modulo di domanda e con esso abbiamo contato le centinaia che sono state convertite in clienti senza numero o numero. I rimanenti hanno mostrato l'incremento maggiore, pari allo 0,81%.

Nota: solo perché una persona ti fornisce il suo numero dal modulo, non vi è alcuna garanzia che i fondi vengano ripristinati.

Quando parliamo della forma del forward engagement, emergono le possibilità di riattivare i clienti, possibilità che si aprono agli operatori di marketing che hanno creato un database di numeri di telefono speciali dei clienti. Conosceremo i casi di riattivazione riusciti in uno dei nostri nuovi post. Intanto leggiamo cosa puoi fare prima di qualsiasi azione con i numeri di telefono presenti nel database. Condividi nei commenti la tua soddisfazione per l'implementazione della maschera di inserimento dei numeri di telefono e le tue preoccupazioni sul numero di richieste arrivate.

Questo plugin jQuery ti consente di selezionare automaticamente una maschera di input corrispondente in base al numero di telefono inserito. Ciò consente di creare un numero di telefono sul lato del sito per coloro che hanno visto e bezpomilkovym. Inoltre in altri settori il plugin può essere suddiviso in modo diverso, poiché le regole di immissione possono essere presentate sotto forma di più maschere di immissione.

Inserimento Sui siti web è necessario inserire le informazioni relative al numero di telefono. È successo così che ogni paese ha il diritto di stabilire le proprie regole per comporre lo stesso numero, a seguito della quale periodicamente sorge confusione tra residenti di paesi diversi: alcuni chiamano il numero con la cifra iniziale 8, altri - con Un numero è 0 e il terzo è il segno +. La soluzione principale Per ridurre la complessità del problema e portare i numeri in un unico formato esistono 3 soluzioni principali:
  • Viene richiesto di inserire il numero utilizzando la maschera di immissione aggiuntiva. Vantaggio: visualizzare il numero al minimo possibile nel numero. Nedolyk: il bordo della pelle ha la propria scritta per il giorno del numero.
  • Koristuvachev viene incaricato di selezionare direttamente una regione e inserire direttamente la parte mancante del numero; Forse a causa del congelamento della maschera sul posto. Vantaggio: la possibilità di utilizzare maschere diverse per regioni diverse (anche per regioni al centro della regione). Difetti: l'elenco dei bordi (e delle regioni al centro del bordo della pelle) potrebbe essere più lungo; Il numero di telefono non viene più visualizzato completamente (oppure è necessaria una rielaborazione prima di salvare e visualizzare il numero).
  • Posiziona un segno + davanti al numero (dietro gli spazi di immissione) per consentirti di non inserire più numeri. Vantaggi: facilità di implementazione. Non basta: disponibilità della visualizzazione dei numeri.
  • Soluzione proposta Di conseguenza, si è deciso di modificare la maschera di input originale in modo che fosse cambiata in base al valore di riga del numero. Inoltre, quando inserisci un numero, verrà visualizzato il nome del paese che è stato inserito. Questo approccio, soggettivamente, può risolvere tutte le carenze del trattamento.

    Considerando che il numero di paesi nel mondo è notevolmente ridotto, si è deciso di compilare un elenco di mascherine per tutti i paesi. Infatti, le notizie pubblicate sul sito dell'Unione Internazionale delle Telecomunicazioni Elettriche hanno ricevuto un'ampia revisione.

    La raccolta di queste informazioni ha prodotto molte sorprese. Nel processo di raccolta delle informazioni è stato necessario includere tutte le possibili opzioni di numeri di telefono nella regione. Tuttavia, a causa della grande quantità di informazioni raccolte manualmente, è possibile che nel database raccolto siano presenti imprecisioni. Tra un'ora si prevede di apportare correzioni al set di pannocchie.

    Implementazione del software Il nucleo della maschera di input è l'implementazione vicoristan di jquery.inputmask, di cui Habrahabr ha discusso molto. Questo plugin è attualmente in fase di sviluppo attivo ed è progettato in modo tale che sia facile scrivere semplicemente un'estensione. Tuttavia, il compito di scrivere un’espansione del genere si è rivelato praticamente impossibile. Ho iniziato a migliorare e riscrivere il plugin di output per adattarlo alle mie esigenze, perché... Poiché l'autore continua a lavorare attivamente su funzionalità estese, il risultato della stagnazione delle mie modifiche potrebbe essere problematico. Ecco perché ho avuto la possibilità di scrivere un plugin sul core principale che gestisca (e sovrascriva) attività esterne ed esegua la modifica dei dati. Per trasferire i tuoi raccoglitori di nuovi input ai selezionatori del plugin principale, usa la libreria plugin jquery.bind-first. Durante lo sviluppo delle regole di smistamento, sono state adottate le seguenti mentalità:
  • Tutti i simboli nel campo di immissione sono divisi in 2 tipi: simboli significativi (la mia selezione ha il simbolo #, che significa un numero significativo, numeri 0-9) e simboli decorativi (tutti gli altri).
  • Un altro tipo di simboli nella maschera di input sono i simboli modello (in alcuni casi il simbolo #) e altri.
  • Di conseguenza, sono emerse le seguenti regole di ordinamento nell'ordine della loro classificazione:

  • Quando si cambiano 2 maschere carattere per carattere, vengono accettati solo i caratteri significativi (non i decoratori).
  • Vari caratteri jolly vengono trattati come uguali e altri caratteri significativi sono uguali al relativo codice.
  • I caratteri non modello sono sempre più piccoli di quelli modello e di conseguenza sono più vari.
  • Minore è il numero di simboli significativi nella maschera di input, maggiore è il valore della maschera di input.
  • Cerca l'input della maschera della pelle Quando il testo in ingresso con la maschera nera viene equalizzato, i caratteri meno significativi della maschera della pelle vengono presi dall'elenco ordinato. Se la riga sembra seguire la maschera di input, indipendentemente dal fatto che tutti i caratteri iniziali siano stati verificati, la maschera di input fornita viene considerata incoerente. Se il testo di input è soddisfatto da più maschere di input, la prima di esse viene ruotata. Quindi, nel modello trovato, tutti i simboli significativi (compresi quelli non modello) vengono sostituiti da uno modello, che è una combinazione di tutti i simboli consentiti da uno qualsiasi dei simboli modello.
    • keydown - seguito dalla pressione dei tasti Backspace e Canc - modificando la maschera di flusso inserita in precedenza, poiché il processore principale rimuove un carattere dal testo. Inoltre, è necessario premere il tasto Inserisci, che modifica la modalità di immissione del testo per la sincronizzazione.
    • pressione di un tasto: i frammenti del carattere da inserire potrebbero non essere consentiti dalla maschera di input originale (tutti i caratteri significativi in ​​essa contenuti vengono sostituiti con quelli modello), è necessario controllare che la nuova riga corrisponda a una delle maschere consentite. Se non sono presenti tali maschere, l'input per il simbolo viene scartato, altrimenti la maschera di input viene aggiornata, dopodiché l'input viene trasferito all'analizzatore del kernel.
    • incolla, inserisci - incolla il testo dagli appunti. Prima di trasferire l'elaborazione al kernel, viene selezionata una maschera per la riga risultante dall'incollaggio del testo dagli appunti. Una volta che la maschera di input non è stata selezionata, il testo viene tagliato carattere per carattere dalla fine fino a quando il testo non è soddisfatto da una maschera di input. Un'operazione simile viene eseguita quando il testo nel campo di input viene corretto facendo clic sulla funzione val(), così come quando viene inizializzata la maschera di input, poiché è impostata sul campo di input.
    • trascina e rilascia: il processo è simile a quello per incollare.
    • sfocatura - elaborazione aggiuntiva allo scopo, poiché la modalità di cancellazione del testo quando si perde la messa a fuoco viene aumentata, poiché non soddisfa la maschera di input. Questa idea viene trasferita dopo il compilatore principale, in cima a quelli anteriori.

    Tutte le idee vengono visualizzate nell'ambito della maschera inserita. Ciò consente di evitare comportamenti errati quando si fa clic sulla maschera di input dopo l'inizializzazione dell'input (poiché il kernel, durante l'inizializzazione, ricorda tutte le sonde precedentemente installate nello spazio della maschera di input).

    Esempio wiki Formato dell'elenco delle maschere L'elenco delle maschere è un array JavaScript di oggetti, importanti con un diverso insieme di poteri. Almeno un potere, che deve posizionare la maschera di input, può essere presente in tutti gli oggetti dell'array. Potrebbe essere sufficiente il nome del parametro a cui applicare la maschera. Di seguito è riportato un frammento di tale array:
    [ … ( "mask": "+7(###)###-##-##", "cc": "RU", "name_en": "Russia", "desc_en": "", " name_ua": "Russia", "desc_ua": "" ), ( "mask": "+250(###)###-###", "cc": "RW", "name_en": " Ruanda", "desc_en": "", "name_ru": "Ruanda", "desc_ru": "" ), ( "mask": "+966-5-####-####", "cc ": "SA", "name_en": "Arabia Saudita", "desc_en": "mobile", "name_ru": "Arabia Saudita", "desc_ru": "mobile" ), ( "mask": "+966- #-###-####", "cc": "SA", "name_en": "Arabia Saudita", "desc_en": "", "name_ru": "Arabia Saudita", "desc_ru": " " ), … ] Parametri di connessione del plugin Prima di connettersi è necessario selezionare e ordinare l'elenco delle maschere. È importante evitare le funzioni offensive dei Vikon:
    $.masksSort = funzione(maskList, defs, match, key)
    • maskList - un array di oggetti che salvano le maschere di input (un frammento di un oggetto meraviglioso);
    • defs – un array di simboli template (nel mio caso, questo è il simbolo #);
    • match - un'espressione regolare che descrive caratteri significativi (in questo caso /|#/);
    • key – nome del parametro dell'oggetto nell'array in cui posizionare la maschera di input.

    Una volta connesso, al plugin viene passato un oggetto speciale che descrive il suo robot. Questo oggetto contiene il seguente set di parametri:

    • inputmask - un oggetto che contiene parametri che vengono passati al plugin principale inputmask;
    • match - un'espressione regolare che descrive caratteri significativi, oltre a quelli modello;
    • sostituisci: un carattere jolly che sostituisce tutti i caratteri significativi; può essere nell'oggetto dell'oggetto designato in putmask;
    • elenco – array di oggetti per descrivere le maschere di input;
    • listKey – il nome del parametro al centro dell'oggetto che salva la maschera di input;
    • onMaskChange - una funzione che viene chiamata quando la maschera di input viene aggiornata; Quando il primo parametro viene passato a un oggetto in un array, la maschera di input di ciascuno corrisponde al testo immesso e l'altro - la precisione della maschera assegnata: true - la maschera di input corrisponde alla maschera di input, false - per un parametro affidabile valore della maschera, è necessario inserire caratteri aggiuntivi.

    Per inizializzare il plugin, è necessario inserire il metodo della maschera di input prima del campo di input:
    $.fn.inputmasks = funzione(maskOpts, modalità)

    • maskOpts - un oggetto che descrive il funzionamento del plugin;
    • modalità – non-linguaggio; Al momento è supportato il valore isCompleted: di conseguenza il metodo diventa true se viene aggiunto il testo nella massa di input e false nell'altro caso.
    Esempio di connessione plug-in
    Maschera di input var maskList = $.masksSort($.masksLoad("phone-codes.json"), ["#"], /|#/, "mask"); var maskOpts = ( inputmask: ( definizioni: ( "#": ( validatore: "", cardinalità: 1 ) ), //clearIncomplete: true, showMaskOnHover: false, autoUnmask: true ), match://, replace: "# ", lista: mascheraLista, listaChiave: "maschera", onMaskChange: funzione(maskObj, completato) ( if (completato) ( var suggerimento = mascheraObj.name_ru; if (maskObj.desc_ru && mascheraObj.desc_ru != "") ( suggerimento + = "(" + mascheraObj.desc_uk + ")" ) $("#descr").html(suggerimento); altrimenti ( $("#descr").html("Maschera di input"); ) $(questo ) .attr("segnaposto", $(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("Maschera di input"); ) )); $("#phone_mask").change(); Dimostrazione Un esempio di demo di il plug-in di visualizzazione espansa

    © 2024 androidas.ru - Tutto su Android