So erstellen Sie eine einfache Rufnummernauswahl
Telefonnummern, sind neben Namen und E-Mails die am häufigsten verwendeten Kontaktinformationen in Online-Formularen. Telefonnummernfelder sind in der Regel so gestaltet, dass Benutzer die Nummern über ihre Tastatur eingeben müssen. Diese Methode führt häufig zu ungenauen Dateneingaben.
Zu Benutzereingabefehler reduzieren Um die Benutzererfahrung Ihrer Website zu verbessern, können Sie eine erstellen GUI Auf diese Weise können Benutzer ihre Telefonnummer schnell eingeben, ähnlich wie bei der Datumsauswahl.
In diesem Tutorial erfahren Sie, wie Hinzufügen einer einfachen Rufnummernauswahl zu einem Eingabefeld. Wir verwenden HTML5, CSS3 und JavaScript, um zu der GUI zu gelangen, die Sie in der folgenden Demo sehen und testen können. Wir setzen auch reguläre Ausdrücke ein, um sicherzustellen, dass Benutzer wirklich eine gültige Telefonnummer eingeben.
1. Erstellen Sie das Telefonnummernfeld
Zuerst, Erstellen Sie ein Eingabefeld mit einem Wählsymbol auf der rechten Seite, das den Wählbildschirm beim Klicken öffnet. Das Wählsymbol sieht aus wie 9 schwarze Kästchen, die 3 x 3 angeordnet sind. Sie müssen das, was Sie auf einem normalen Telefon sehen, mögen.
Ich benutze die tel Eingabetyp für die korrekte HTML5-Semantik, Sie können jedoch auch die Text Eingabetyp, wenn Sie möchten.
2. Erstellen Sie den Wählbildschirm
Das Wahlbildschirm ist ein gitter von zahlen von 0 bis 9 plus einige Sonderzeichen. Es kann mit gemacht werden entweder ein HTML Hier zeige ich Ihnen, wie Sie die Dial-Screen-Tabelle in JavaScript erstellen. Sie können die Tabelle natürlich auch direkt im HTML-Quellcode hinzufügen, wenn Sie dies vorziehen. Erstellen Sie zuerst ein neues Füge hinzu ein Die Zwei Die letzte Reihe ist anders, da sie besteht zwei Sonderzeichen, Fügen Sie die folgende Zeile hinzu, um die letzte Zeile auf dem Wählbildschirm zu erstellen Das Der Dial-Bildschirm ist nun vollständig, füge es dem hinzu Um es attraktiver zu machen, gestalten Sie den Dial-Bildschirm mit CSS. Du musst nicht unbedingt bei meinem Styling bleiben, aber vergiss es nicht hinzufügen Fügen Sie zuerst das hinzu Fügen Sie dem Dial-Symbol dann einen Click-Ereignishandler hinzu mit JavaScript zu die Sichtbarkeit umschalten des Wahlbildschirms. Dazu müssen Sie das zuvor genannte verwenden Das Fügen Sie eine benutzerdefinierte Funktion hinzu gibt Ziffern in das Telefonnummernfeld ein auf das Klicken der Zellen des Wahlbildschirms. Das Jetzt hast du eine Bildschirm mit Arbeitsanzeige um das Telefonnummernfeld einzugeben. Um mit dem CSS Schritt zu halten, ändern Sie die Hintergrundfarbe der Ziffern in ihrem Füge hinzu ein Einfache Regex-Validierung um die Telefonnummer zu bestätigen, während der Benutzer gibt die Ziffern in das Eingabefeld ein. Gemäß den von mir verwendeten Validierungsregeln kann die Telefonnummer nur mit einer Ziffer oder mit der Ziffer beginnen Sie können die Visualisierung meines regulären Ausdrucks in der unten gezeigten Bildschirmdarstellung sehen, die mit der Debuggex-App erstellt wurde. Sie können die Telefonnummer auch gemäß dem Telefonnummernformat Ihres Landes oder Ihrer Region überprüfen. Erstellen Sie ein neues reguläres Ausdrucksobjekt und speichern Sie es im Wenn die Eingabe nicht gültig ist, wird die Ich bin Einen roten Rand hinzufügen in das Eingabefeld, wenn die Eingabe ungültig ist, Sie können den Benutzer jedoch auch auf andere Weise informieren, beispielsweise über Fehlermeldungen. Das Beachten Sie, dass ich auch eine hinzugefügt habe zusätzliche Validierung für maximale Zeichen (darf nicht mehr als 15 sein) mit einem Ihre Telefonnummer-Picker ist jetzt fertig, schauen Sie sich die finale Demo unten an. oder JavaScript.
'Tabelle' Element in der DOM mit der createElement () Methode. Gib auch das 'wählen' Kennung. / * Wählbildschirm erstellen * / var dial = document.createElement ('table'); dial.id = 'dial'; zum Schleife die vier Zeilen der Wähltabelle mit einzufügen. Dann für jede Reihe, führe einen anderen aus zum Schleife um drei Zellen pro Zeile hinzuzufügen. Markiere jede Zelle mit dem 'dialDigit' Klasse. für (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();
zum Schleifen oben berechnen die Ziffern, die in die Zellen der Wähltabelle gehen - die Werte der cell.textContent Eigenschaft - auf folgende Weise: (colNum + 1) + (rowNum * 3) / * erste Zeile * / (0 + 1) + (0 * 3) = 1 (1 + 1) + (0 * 3) = 2 (2 + 1) + ( 0 * 3) = 3 / * zweite Reihe * / (0 + 1) + (1 * 3) = 4 (1 + 1) + (1 * 3) = 5 (2 + 1) + (1 * 3) = 6 / * etc. * /
- und + die in Telefonnummernformaten verwendet werden, um regionale Codes und die Ziffer zu identifizieren 0.ob Aussage zum Inneren zum Schleife. für (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 HTML-Container, den Sie in Schritt 1 mit erstellt haben zwei DOM-Methoden:querySelector () Methode zu Wähle den Container ausappendChild () Methode zu Hängen Sie den Wahlbildschirm an - gehalten in der wählen variabel - zum Container document.querySelector ('# dialWrapper'). appendChild (dial); 
3. Gestalten Sie den Wählbildschirm
Benutzerauswahl: keine; Eigentum an der #wählen Container so dass, während der Benutzer auf die Ziffern klickt, der Text wird nicht vom Cursor ausgewählt. #Dial Breite: 200px; Höhe: 200px; Grenzzusammenbruch: Zusammenbruch; Text ausrichten: Mitte; Position: relativ; -ms-user-select: keine; -webkit-user-select: keine; -moz-user-select: keine; Benutzerauswahl: keine; Farbe: # 000; Box-Schatten: 0 0 6px # 999; .dialDigit border: 1px solid #fff; Cursor: Zeiger; Hintergrundfarbe: rgba (255,228,142, .7);
4. Zeigen Sie den Dial-Bildschirm bei Klick an
Sichtbarkeit: versteckt; Stilregel zu #wählen in der obigen CSS zu verstecken Sie den Wahlbildschirm standardmäßig. Es wird nur angezeigt, wenn der Benutzer auf das Wählsymbol klickt.querySelector () und das addEventListener () Methoden. Letzteres hängt ein Klickereignis an zum Wählsymbol und ruft den Benutzer an ToggleDial () Funktion.ToggleDial () Funktion ändert die Sichtbarkeit des Wahlbildschirms von ausgeblendet nach sichtbar und zurück. document.querySelector ('# dialIcon'). addEventListener ('click', toggleDial); function toggleDial () dial.style.visibility = dial.style.visibility === 'ausgeblendet' || dial.style.visibility === "? 'visible': 'hidden'; 5. Fügen Sie die Funktionalität hinzu
dialNumber () Funktion fügt die Ziffern einzeln an zum Textinhalt Eigenschaft des Eingabefeldes, das mit markiert ist #Telefon-Nr Kennung. phoneNo = document.querySelector ('# phoneNo'); function dialNumber () phoneNo.value + = this.textContent; dialDigits = document.querySelectorAll ('. dialDigit'); für (var i = 0; i < dialDigits.length; i++) dialDigits[i].addEventListener('click', dialNumber); :schweben und :aktiv (wenn der Benutzer darauf klickt) gibt an. .dialDigit: hover Hintergrundfarbe: rgb (255,228,142); .dialDigit: aktiv Hintergrundfarbe: # FF6478;
6. Fügen Sie die Überprüfung des regulären Ausdrucks hinzu
+ Zeichen, und akzeptieren Sie die - Zeichen danach.
Muster Variable. Erstellen Sie auch einen benutzerdefinierten bestätigen() Funktion, die die eingegebene Telefonnummer überprüft entspricht dem regulären Ausdruck, und wenn es ist Mindestens 8 Zeichen lang.bestätigen() Funktion muss zu Feedback geben an den Benutzer. pattern = new RegExp ("^ (\\ + \\ d 1,2)? (\\ d + \\ - * \\ d +) * $"); Funktion validate (txt) // mindestens 8 Zeichen für eine gültige Telefonnummer if (! pattern.test (txt) || txt.length < 8) phoneNo.style.border = '2px solid red'; return false; else phoneNo.style.border = 'initial'; return true; 7. Führen Sie die Validierung durch
bestätigen() Funktionen muss aufgerufen werden um die Validierung durchzuführen. Nennen Sie es aus dem dialNumber () Funktion, die Sie in Schritt 5 erstellt haben, um den Wert von zu überprüfen Telefon-Nr Variable.ob Aussage. function dialNumber () var val = phoneNo.value + this.textContent; // maximal zulässige Zeichen, 15 if (val.length> 15) return false; validieren (val); phoneNo.value = val;
