HTML-input, der nimmt nur die zahlen und die + symbol
Ich versuche zu bauen, eine benutzerdefinierte text-Eingabe für Rufnummern, die akzeptiert nur zahlen und die plus - ( + ) - symbol; alle anderen Zeichen müssen, werden verworfen und nicht angezeigt auf dem Feld.
Ich versuche zu tun, diese mit einem event-handler (onkeydown/onkeypress) und verwerfen von Eingaben entsprechend andere Tasten. Allerdings kann ich nicht herausfinden, eine cross-browser Weg, es zu tun. Hier sind die Ansätze, die ich ausprobiert habe und nicht funktioniert:
-
Mit dem onkeypress-event und suchen bei event.Schlüssel, um herauszufinden, welche Taste gedrückt wurde: funktioniert nicht in Chrome (siehe http://caniuse.com/keyboardevent-key). Gibt es eine cross-browser-Lösung?
-
Mit der onkeycode Veranstaltung und suchen bei event.keyCode: funktioniert nicht, wenn wir müssen, drücken Sie mehrere Tasten, um das drucken eines Zeichens (zum Beispiel ein Englisches Tastatur-layout erfordert das drücken von Shift und = geben +). Darüber hinaus ermöglicht es Sonderzeichen wie !@#$%ˆ&*() zu erscheinen, denn diese werden angezeigt, wenn durch drücken der Umschalttaste und einer Zahl. (Dies ist der Ansatz JavaScript keycode erlauben, Anzahl und plus-symbol wird nur, aber es hilft mir nicht viel ;))
-
Mit dem HTML-Attribut "pattern": dies scheint nicht wirklich zu verhindern, dass Menschen schreiben, was auch immer Sie Lust haben.
Dank!
- Könnten Sie die onkeyup-Ereignis die gesamte Eingabe filtern unerwünschte Zeichen mit regexp
- Möglich, Duplikat der JavaScript keycode erlauben, Anzahl und plus-symbol wird nur
- Nein, es ist nicht doppelt. Der Ansatz folgte, der link ist genau einer der Ansätze, die ich ausprobiert und funktioniert nicht. Der Grund, warum es nicht funktioniert, ist erklärt im ersten post, zweiter Aufzählungspunkt.
- Der Ansatz kann nicht funktionieren, aber die Frage ist im wesentlichen die gleiche. Das es ein Duplikat ist. Egal, @RobinvdA vorgeschlagene Ansatz ist wahrscheinlich zu sein, was Sie wollen.
- Wenn Sie die regexp ' Ing der Wert eines input-und Hygienisierung es dann der cursor wird gezwungen, an das Ende der textbox, es sei denn, Sie wissen, dass cross-browser-Lösung für die Aufrechterhaltung der cursor-position. Ich habe stoßen viel ärgerlich Schnittstellen, die ausführen, dass die operation unnötig und hindern mich daran fixieren etwas in der Mitte des Textes.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Gibt es eine andere Lösung, die Sie verwenden können,
Array.der Prototyp.filter()
zu entfernen, die die schlechte Zeichen, undArray.der Prototyp.join()
so erstellen Sie die Zeichenfolge, bevor Sie es ins input.Können Sie
oninput
Veranstaltung. Ausführen einer JavaScript-wenn ein user etwas schreibt, was in einer<input>
Feld.Siehe Beispiel unten
JS:
HTML:
Hinweis : ich verwende input type tel zu zeigen Standard-Ziffernblock in ein smartphone oder ein tablet.
Referenz : MDN
<input>
input
nebenchange
; es werde die Arbeit viel schöner in Chrome (und Firefox?).preventDefault
zu verhindern, dass das Ereignis verarbeitet, alles (aber YMMV mit den letzteren)setSelectionRange
. Danke für deinen Beitrag.Immer versuchen, server-seitige Validierung, bedeutete dies für die 'Hilfe' der Benutzer, nicht um die Daten zu überprüfen, (Sie können immer öffnen Sie Ihre Konsole und ändern Sie den Wert des input-Wert, aber Sie wollen)
Nun, die Methode, die ich verwenden würde, ist:
Überprüfen Sie den Wert, der die gesamte Eingabe auf ändern, und stellen Sie diesen Wert gehen durch eine regex zu reinigen unerwünschte chars, während die Verfolgung von wo Sie die "text-cursor" war
JS:
HTML:
Könnten Sie ein viel mehr 'präzise' regex nach, was Sie wollen, hier ist ein nettes tool für das: RegExr
Ich schlage vor, Sie Blick auf dieses Projekt. https://github.com/igorescobar/jQuery-Mask-Plugin/
Könnten Sie es wie es ist:
$('.phone').mask('0000-0000');
Beispiel: https://igorescobar.github.io/jQuery-Mask-Plugin/
Oder Sie können den Quellcode zu Lesen und sehen Sie, wie Sie es lösen.
verwenden Sie input
type="tel" oder "Tel"
Es Zeigt die Standard-Ziffernblock in Handys.
Hoffe das hilft 🙂
Diese robuste generischen Ansatz ist inspiriert durch @R3tep Antwort. Es erlaubt das definieren regexp-Muster über die
data-filter
- Attribut ähnelt der Attribut "pattern":JS:
HTML:
Mithilfe einer Kombination aus
keyup
Ereignis-listener, die einige RegEx/String-Vergleich Methoden und eine temporäre variable, ich war in der Lage zu kommen mit dem folgenden:Werfen Sie einen Blick auf die Geige: https://jsfiddle.net/Lg31pomp/2/
Diese scheint zu funktionieren mit Ziffern, die
+
- Zeichen sowie, wenn der Benutzer backspaces das input-element.Ihre Eingabe sollte wie folgt Aussehen:
- und dies ist das Skript:
Dies ist eine der vielen möglichen Lösungen.