Eingabetyp = "Zahl" mit Muster = "[0-9] *" erlaubt Buchstaben in Firefox

Question

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">

css html

22

Heidel 19 Apr. 2018 im 17:27

Answer 1

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>

6

j08691 20 Apr. 2018 im 15:00

Answer 2

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 ...

6

slee423 19 Apr. 2018 im 15:24

Answer 3

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>.

4

Ignacio Ara 19 Apr. 2018 im 14:36

Answer 4

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.

0

Ritesh Yadav 19 Feb. 2019 im 08:27

css

Eingabetyp = "Zahl" mit Muster = "[0-9] *" erlaubt Buchstaben in Firefox

4 Antworten

Neue Fragen