Alle Fragen stehen also im Titel des Themas. Die Eingabe von type="number"
mit pattern="[0-9]*"
funktioniert in Chrome einwandfrei, erlaubt jedoch Buchstaben in FF. Gibt es eine Möglichkeit, das Problem ohne Verwendung von jQuery oder JS zu beheben?
.small-input {
-moz-appearance: textfield;
}
.small-input::-webkit-inner-spin-button {
display: none;
}
.small-input::-webkit-outer-spin-button,
.small-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
}
<input class="small-input " pattern="[0-9]*" value="" type="number">
4 Antworten
Es scheint, dass Firefox Sie nicht daran hindert, alphabetische Zeichen in eine Zahleneingabe einzugeben. Die Eingabe wird jedoch beim Absenden Ihres Formulars wie unten gezeigt überprüft. Beachten Sie, dass sowohl e
als auch E
in numerischen Eingaben gültig sind.
Laut MDN
<input type="number">
Elemente unterstützen die Verwendung des Musters nicht Attribut, mit dem eingegebene Werte einem bestimmten regulären Ausdruck entsprechen Muster. Der Grund dafür ist, dass Zahleneingaben keine enthalten können alles außer Zahlen, und Sie können das Minimum und Maximum einschränken Anzahl gültiger Ziffern unter Verwendung der Attribute min und max
Also keine Notwendigkeit, es zu benutzen.
Die Auswahl einer numerischen Eingabe bewirkt zwei Dinge. Erstens sollte auf Mobilgeräten anstelle einer normalen Tastatur ein Ziffernblock zur Eingabe der Eingabe angezeigt werden, zweitens sollten nur Zahlen als gültige Eingabe zulässig sein. Wenn Sie also verhindern möchten, dass ein Benutzer Text in einen eingibt, benötigen Sie JavaScript.
Das folgende Beispiel zeigt, dass Sie beim Versuch, das Formular zu senden, wenn die Eingabe nicht numerisch ist, aufgefordert werden, sie zu korrigieren, und das Musterattribut nicht erforderlich ist:
.small-input {
-moz-appearance: textfield;
}
.small-input::-webkit-inner-spin-button {
display: none;
}
.small-input::-webkit-outer-spin-button,
.small-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
<form>
<input class="small-input" value="" type="number">
<button>Button</button>
</form>
Sie können Regex
verwenden, um den Benutzer vollständig daran zu hindern, Buchstaben in das Feld input
einzugeben.
Daher würde ich Ihrem Eingabeelement den folgenden Ereignis-Listener hinzufügen: onkeypress="preventNonNumericalInput(event)"
<input class="small-input " pattern="[0-9]*" value="" type="number" onkeypress="preventNonNumericalInput(event)">
Und dann würden Sie in Ihrer JavaScript-Datei die folgende Funktion erstellen:
function preventNonNumericalInput(e) {
e = e || window.event;
var charCode = (typeof e.which == "undefined") ? e.keyCode : e.which;
var charStr = String.fromCharCode(charCode);
if (!charStr.match(/^[0-9]+$/))
e.preventDefault();
}
Ich habe dies getestet und es sollte jegliche nicht numerische Eingabe und Sonderzeichen verhindern, z. B. @ #. /? etc ...
Elemente unterstützen die Verwendung des Musterattributs nicht, um eingegebene Werte an einen bestimmten regulären Ausdruck anzupassen Muster . Der Grund dafür ist, dass Zahleneingaben keine enthalten können alles außer Zahlen, und Sie können das Minimum und Maximum einschränken Anzahl der gültigen Ziffern unter Verwendung der Attribute min und max, wie erläutert über.
Link: https://developer.mozilla.org/ en-US / docs / Web / HTML / Element / Eingabe / Nummer
Verwenden Sie stattdessen Javascript, indem Sie diesem Link folgen / a>.
Es funktioniert mit dem Ländercode "[0-9] + $" (Regex-Format).
Hinweis: Mit dem obigen Regex-Code sind Leerzeichen zulässig.
Ohne Leerzeichen-
Es funktioniert mit dem Ländercode "^ [- + ()] [0-9] [- + () 0-9] $".
Hinweis: Mit dem obigen Regex-Code ist kein Leerzeichen zulässig.
Neue Fragen
css
CSS (Cascading Style Sheets) ist eine Darstellungs-Stylesheet-Sprache, die zur Beschreibung des Erscheinungsbilds und der Formatierung von HTML-Dokumenten (HyperText Markup Language), XML-Dokumenten (Extensible Markup Language) und SVG-Elementen verwendet wird, einschließlich (aber nicht beschränkt auf) Farben, Layout, Schriftarten, und Animationen. Außerdem wird beschrieben, wie Elemente auf dem Bildschirm, auf Papier, in der Sprache oder auf anderen Medien gerendert werden sollen.