Share
In questo tutorial imparerai come formattare, in tempo reale, l'input dell'utente in un campo modulo. Quando un utente digita qualcosa in un campo di input, il valore viene regolato automaticamente, aggiungendo elementi come punteggiatura e trattini, ritaglio degli spazi, rimozione di caratteri imprevisti e modifica dell'involucro delle parole.
Questo approccio può facilitare notevolmente gli utenti durante l'immissione dei dati del modulo. Semplifica il processo, riduce al minimo gli errori, fornisce feedback e generalmente migliora l'esperienza dell'utente.
Esploreremo due esempi, utilizzando jQuery per le API, i metodi e le utilità per rendere la scrittura del codice più comoda e intuitiva. Avere una conoscenza di base di jQuery aiuterà, anche se dovresti essere in grado di capire cosa sta succedendo anche se non lo fai. Cominciamo!
Controlla la penna di avviamento, forchetta e seguila. Contiene a testo campo di input, con alcuni stili per renderlo presentabile. La scheda JS è vuota, ma ha già aggiunto jQuery al ed è pronto ad andare!
E come puoi vedere qui sotto, il nostro input si aspetta una somma di denaro. Questo tipo di campo di input può essere in genere trovato in un modulo bancario, di elaborazione pagamenti o di cambio valuta.
Ci sono due problemi che ho riscontrato frequentemente con questo tipo di input:
Per iniziare la formattazione del valore di input, selezioniamo il ingresso elemento, assegnando il risultato a una variabile.
Accentsconagua
var $ form = $ ("#form"); var $ input = $ form.find ("input");Quindi attacciamo il keyup evento per il nostro contributo; attivare una funzione quando l'utente preme e rilascia un tasto della tastiera.
$ input.on ("keyup", function (event) // 1. var selection = window.getSelection (). toString (); if (selection! == ") return; // 2. if ($ .inArray (event.keyCode, [38,40,37,39])! == -1) return;);All'interno di questa funzione aggiungiamo anche alcune righe di codice. Queste linee aggiuntive impediscono l'esecuzione della funzione quando l'utente
In entrambi questi scenari non viene aggiunto alcun nuovo carattere, quindi non è necessario continuare ad eseguire la funzione.
Successivamente, sempre all'interno della nostra funzione, sotto la sezione che impedisce ai tasti freccia di eseguire la funzione, aggiungiamo quanto segue. Questa è la funzione principale che formatta il valore.
// 1 var $ this = $ (questo); var input = $ this.val (); // 2 var input = input.replace (/ [\ D \ s \ ._ \ -] + / g, ""); // 3 input = input? parseInt (input, 10): 0; // 4 $ this.val (function () return (input === 0)? "": Input.toLocaleString ("en-US"););Queste linee eseguono quanto segue:
parseInt () funzione per assicurarsi che il valore sia un numero intero (un numero tondo).toLocaleString () funzione, quindi restituire il valore igienizzato all'elemento di input.Nota: Il separatore può essere , o . a seconda del codice del paese passato in toLocaleString () funzione. Tedesco, de-DE, e Indonesia, L'ho fatto, per esempio, usa . invece di ,.
Prova la demo!
Mentre stai digitando l'input, dovresti scoprire che lettere e caratteri speciali (come dash e punto) saranno rimossi immediatamente. Sarai solo in grado di inserire un numero. Il separatore delle migliaia verrà automaticamente aggiunto.
Un altro tipo di input in cui ha senso applicare questo approccio è il "Numero di licenza"ingresso. Il numero di licenza di Envato Market o il codice di acquisto, ad esempio, è lungo 36 caratteri e comprende lettere, numeri e alcuni trattini. Inserirlo correttamente nei siti Web degli autori è fondamentale se hai bisogno di supporto!
Da dove è il mio codice di acquisto?È inoltre possibile trovare questo tipo di input in un tema o plug-in WordPress premium, in cui è necessario immettere un codice di licenza per ricevere aggiornamenti o utilizzare funzionalità particolari.
In questo secondo esempio, abbiamo creato un campo di input con un testo segnaposto che suggerisce il formato del numero di licenza. E come puoi vedere qui sotto, il numero di licenza comprende 32 caratteri con diversi trattini nel mezzo e ogni carattere dovrebbe essere in maiuscolo.
Ecco la penna di avviamento; forchetta e segui!
Condivideremo la stessa base di codice del nostro primo esempio, ad eccezione della funzione principale.
// 1 var $ this = $ (questo); var input = $ this.val (); // 2 input = input.replace (/ [\ W \ s \ ._ \ -] + / g, "); // 3 var split = 4; var chunk = []; per (var i = 0, len = input.length; i < len; i += split) split = ( i >= 8 && i <= 16 ) ? 4 : 8; chunk.push( input.substr( i, split ) ); // 4 $this.val(function() return chunk.join("-").toUpperCase(); ); La funzione principale, in questo caso:
Il nostro numero di licenza è ora pronto! Provaci:
Dai un'occhiata a questa demo di Donnie D'Amato, un input per le date di formattazione:
Grazie Donnie!
In questo tutorial, abbiamo analizzato due esempi di formattazione automatica dell'input dell'utente, offrendo ai nostri utenti un'esperienza più fluida.
Questo approccio è applicabile a qualsiasi tipo di input di testo. Ad esempio, è possibile applicarlo a un input "username" per assicurarsi che tutte le lettere siano in minuscolo e contenere solo lettere. Puoi anche usarlo per formattare un input "First e Last Name", assicurando che la prima lettera sia maiuscola.
Quando si tratta di inviare il modulo e di eseguire correttamente il sanitation dei dati, si prega di contattare i propri amici sviluppatori back-end.
