Come creare un semplice selettore di numeri di telefono
Numeri di telefono, oltre ai nomi e alle e-mail, sono le informazioni di contatto più utilizzate nei moduli online. I campi del numero di telefono sono generalmente progettati in modo da richiedere agli utenti di digitare i numeri usando le loro tastiere. Questo metodo spesso porta a dati inaccurati.
A ridurre gli errori di input dell'utente e migliorare l'esperienza utente del tuo sito, puoi crearne uno GUI che consente agli utenti di inserire rapidamente il proprio numero di telefono, in un modo simile ai raccoglitori di date.
In questo tutorial, vedrai come aggiungi un semplice selettore di numeri telefonici a un campo di input. Useremo HTML5, CSS3 e JavaScript per accedere alla GUI che puoi vedere e provare nella demo qui sotto. Metteremo anche le espressioni regolari in uso per assicurarci che gli utenti inseriscano realmente un numero di telefono valido.
1. Creare il campo del numero di telefono
Primo, crea un campo di input con un'icona a forma di quadrante sulla destra che aprirà la schermata di composizione al clic. L'icona del quadrante assomiglia a 9 scatole nere, disposte 3 per 3, deve piacere a quello che vedi su un normale telefono.
Sto usando il tel tipo di input per la corretta semantica HTML5, ma puoi anche usare il testo tipo di input se lo desideri.
2. Creare la schermata di composizione
Il quadrante è una griglia di numeri da 0 a 9 più alcuni caratteri speciali. Può essere fatto con o un HTML Qui, ti mostrerò come creare la tabella dial-dial in JavaScript. Puoi, naturalmente, aggiungere la tabella direttamente nel codice sorgente HTML se preferisci in questo modo. Innanzitutto, creane uno nuovo Aggiungere un Il due L'ultima riga è diversa, in quanto è composta da due personaggi speciali, Per creare l'ultima riga sulla schermata di composizione, aggiungere quanto segue Il la schermata di composizione è ora completa, aggiungilo al Per renderlo più attraente, stile la schermata di composizione con CSS. Non devi necessariamente attenermi al mio stile, ma non dimenticarti di farlo Inserisci Innanzitutto, aggiungi il Quindi, aggiungi un gestore di eventi click all'icona di composizione con JavaScript a attiva la visibilità della schermata di composizione. Per fare ciò, è necessario utilizzare il suddetto Il Aggiungi una funzione personalizzata immette le cifre nel campo del numero di telefono al clic delle celle della schermata di composizione. Il Ora, hai un schermo di composizione funzionante per inserire il campo del numero di telefono. Per stare al passo con il CSS, cambia il colore di sfondo delle cifre nella loro Aggiungere un semplice convalida regex per convalidare il numero di telefono mentre l'utente immette le cifre nel campo di immissione. In base alle regole di convalida che utilizzo, il numero di telefono può iniziare solo con una cifra o con Puoi vedere la visualizzazione della mia espressione regolare sullo screenshow qui sotto creato con l'app Debuggex. È inoltre possibile convalidare il numero di telefono in base al formato del numero di telefono del proprio paese o regione. Crea un nuovo oggetto Espressione regolare e memorizzalo nel Quando l'input non convalida, il sono aggiungendo un bordo rosso al campo di input quando l'input non è valido, ma è possibile informare l'utente in altri modi, ad esempio con messaggi di errore. Il Si noti che ho anche aggiunto un convalida aggiuntiva per i caratteri massimi (non può essere superiore a 15) utilizzando un Il tuo selettore del numero di telefono è ora pronto, controlla la demo finale qui sotto. o JavaScript.
'tavolo' elemento nel DOM usando il createElement () metodo. Dagli anche il 'comporre' identificatore. / * Crea dial dial * / var dial = document.createElement ('table'); dial.id = 'dial'; per ciclo continuo per inserire le quattro righe del quadrante con esso. Quindi, per ogni riga, eseguirne un altro per ciclo continuo per aggiungere tre celle per riga. Segna ogni cella con il 'DialDigit' classe. for (var rowNum = 0; rowNum < 4; rowNum++) var row = dial.insertRow(rowNum); for (var colNum = 0; colNum < 3; colNum++) var cell = row.insertCell(colNum); cell.className = 'dialDigit'; cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();
per i cicli sopra calcolano le cifre che entrano nelle celle della tabella di composizione - i valori di cell.textContent proprietà - nel modo seguente: (colNum + 1) + (rowNum * 3) / * prima riga * / (0 + 1) + (0 * 3) = 1 (1 + 1) + (0 * 3) = 2 (2 + 1) + ( 0 * 3) = 3 / * seconda riga * / (0 + 1) + (1 * 3) = 4 (1 + 1) + (1 * 3) = 5 (2 + 1) + (1 * 3) = 6 / * ecc. * /
- e + che vengono utilizzati nei formati dei numeri di telefono per identificare i codici regionali e la cifra 0.Se dichiarazione all'intimo per ciclo continuo. for (var rowNum = 0; rowNum < 4; rowNum++) var row = dial.insertRow(rowNum); for (var colNum = 0; colNum < 3; colNum++) /* if last row */ if (rowNum === 3) cell = row.insertCell(colNum); cell.textContent = '-'; cell.className = 'dialDigit'; cell = row.insertCell(colNum); cell.textContent = '0'; cell.className = 'dialDigit'; cell = row.insertCell(colNum); cell.textContent = '+'; cell.className = 'dialDigit'; break; cell = row.insertCell(colNum); cell.className = 'dialDigit'; cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();
#dialWrapper Contenitore HTML creato nel passaggio 1 utilizzando due metodi DOM:querySelector () metodo a seleziona il contenitoreappendChild () metodo a aggiungere la schermata di composizione - tenuto nel comporre variabile - al contenitore document.querySelector ( '# dialWrapper') appendChild (dial).;
3. Modellare la schermata di composizione
user-selezionare: none; proprietà al #comporre contenitore in modo che mentre l'utente fa clic sulle cifre, il testo non verrà selezionato dal cursore. #dial width: 200px; altezza: 200 px; border-collapse: collapse; allineamento del testo: centro; posizione: relativa; -ms-user-select: none; -webkit-user-select: none; -moz-user-select: none; selezione utente: nessuna; colore: # 000; box-shadow: 0 0 6px # 999; .dialDigit border: 1px solid #fff; cursore: puntatore; background-color: rgba (255,228,142, .7);
4. Mostra la schermata di composizione al clic
visibility: hidden; regola di stile a #comporre nel CSS sopra a nascondi la schermata di composizione per impostazione predefinita. verrà mostrato solo quando l'utente fa clic sull'icona del quadrante.querySelector () e il addEventListener () metodi. L'ultimo allega un evento click all'icona del quadrante e chiama l'abitudine toggleDial () funzione.toggleDial () funzione cambia la visibilità della schermata di composizione da nascosta a visibile e viceversa. document.querySelector ('# dialIcon'). addEventListener ('click', toggleDial); function toggleDial () dial.style.visibility = dial.style.visibility === 'hidden' || dial.style.visibility === "? 'visible': 'hidden'; 5. Aggiungi la funzionalità
comporre il numero() funzione aggiunge le cifre una alla volta al textContent proprietà del campo di input contrassegnato con #phoneNo identificatore. phoneNo = document.querySelector ('# phoneNo'); function dialNumber () phoneNo.value + = this.textContent; dialDigits = document.querySelectorAll ('. dialDigit'); per (var i = 0; i < dialDigits.length; i++) dialDigits[i].addEventListener('click', dialNumber); : hover e :attivo (quando l'utente fa clic su di esso) afferma. .dialDigit: hover background-color: rgb (255,228,142); .dialDigit: active background-color: # FF6478;
6. Aggiungi la convalida dell'espressione regolare
+ carattere, e accetta il - personaggio dopo.
modello variabile. Crea anche una personalizzazione convalidare() funzione che controlla se il numero di telefono inserito è conforme all'espressione regolare, e se lo è di almeno 8 caratteri.convalidare() la funzione deve fornire un feedback per l'utente. pattern = new RegExp ("^ (\\ + \\ d 1,2)? (\\ d + \\ - * \\ d +) * $"); funzione validate (txt) // almeno 8 caratteri per un numero di telefono valido se (! pattern.test (txt) || txt.length < 8) phoneNo.style.border = '2px solid red'; return false; else phoneNo.style.border = 'initial'; return true; 7. Eseguire la convalida
convalidare() funzioni deve essere chiamato per eseguire la convalida. Chiamalo dal comporre il numero() funzione creata nel passaggio 5 per convalidare il valore di phoneNo variabile.Se dichiarazione. function dialNumber () var val = phoneNo.value + this.textContent; // caratteri massimi consentiti, 15 if (val.length> 15) restituisce false; convalidare (val); phoneNo.value = val;
