Wenn ich Eingabeart Nummer gebe, wird der Buchstabe e und spezielle Zeichen werden auch im Eingabefeld angezeigt. Ich möchte nur Ziffern anzeigen. Wie man sie blockiert?Wie blockiere ich +, -, e im Eingabetyp Nummer?
<input type="number">Versuchen Sie, die Standard behavio verhindern ur, wenn Sie den eingehenden Schlüsselwert nicht mag:
document.querySelector(".your_class").addEventListener("keypress", function (evt) {
if (evt.which != 8 && evt.which != 0 && evt.which < 48 || evt.which > 57)
{
evt.preventDefault();
}
});
// 0 for null values
// 8 for backspace
// 48-57 for 0-9 numbers<input type="number" class="your_class">Benutzer kann Kopieren Sie noch Paste 12e. + - – JerryGoyal
Sie können es einfach mit jQuery
Versuchen Sie diesen Code
$(function() {
$("#input").keypress(function(event) {
if (event.which != 8 && event.which != 0 && (event.which < 48 || event.which > 57)) {
$(".alert").html("Enter only digits!").show().fadeOut(2000);
return false;
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="input" />
<div class="alert"></div>Statt zu versuchen, Werte zu blockieren, können Sie versuchen, Werte zu ersetzen, die nicht numerisch sind.
Wenn Sie keycodes zu handhaben, werden Sie numKeys, numPad, shift +, crtl + etc zu behandeln haben und versuchen, zu aktualisieren, während Fokus innerhalb Textbox ist auch fehlschlagen. Prevent Default wird viel mehr als falsche Werte stoppen.
$("#input").on("input", function() {
var nonNumReg = /[^0-9]/g
$(this).val($(this).val().replace(nonNumReg, ''));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="tel" id="input" />
<div class="alert"></div>@Downvoter, Bitte kommentieren, was fehlt – Rajesh
Ich vermute, er erwartet Eingabe-Typ zu sein (um einen Spinner zu bekommen) – JerryGoyal
Sie blockieren können diese Zeichen mit keydown Ereignis
var inputBox = document.getElementById("inputBox");
var invalidChars = [
"-",
"+",
"e",
];
inputBox.addEventListener("keydown", function(e) {
if (invalidChars.includes(e.key)) {
e.preventDefault();
}
});<input type="number" id="inputBox" />Eingabe aber der Benutzer kann sie immer noch geben, wenn er/sie eine Kopie tut/einfügen (oder über die Konsole). Um das Kopieren/Einfügen zu verhindern, können Sie den eingegebenen Wert [*] ersetzen.
var inputBox = document.getElementById("inputBox");
var invalidChars = [
"-",
"+",
"e",
];
inputBox.addEventListener("input", function() {
this.value = this.value.replace(/[e\+\-]/gi, "");
});
inputBox.addEventListener("keydown", function(e) {
if (invalidChars.includes(e.key)) {
e.preventDefault();
}
});<input type="number" id="inputBox" />* Sie können nicht wirklich mit Typ-Nummer setzen Sie den eingegebenen Wert auf ein Eingabefeld bekommen. Sie können den eingegebenen Wert abrufen, solange es sich um eine Zahl handelt, dh der Wert übergibt die interne Nummernprüfung. Wenn der Benutzer 1e kopiert/einfügt, schlägt die vorgeschlagene Lösung fehl.
Was passiert, wenn Sie 1e geben, dass Eingabefeld überprüft, ob es sich um eine Zahl ist, und wenn es nicht ist (1e nicht ist) wirft es eine Warnung:
Der angegebene Wert „1e“ ist kein gültige Nummer. Der Wert muss mit dem folgenden regulären Ausdruck übereinstimmen: -? (\ D + | \ d +. \ D + |. \ D +) ([eE] [- +]? \ D +)?
und die value Eigenschaft auf "" gesetzt. Wenn Sie die Eigenschaften des Felds überprüfen, finden Sie die Eigenschaft valueAsNumber. Wenn der eingegebene Wert eine Zahl ist, parst das Eingabefeld den Wert und speichert ihn in valueAsNumber. Da 1e keine Nummer ist, wird NaN und NaN wird valueAsNumber zugewiesen und value wird auf "" gesetzt. Sie sehen immer noch 1e im Eingabefeld.
Ich habe eine Frage zu diesem Problem gestellt, aber noch keine Lösung.
@downvoter Wird der downvoter kümmern, um seinen Grund zu erklären? Ich bezweifle, dass diese Antwort nicht nützlich ist. – akinuri
Wirklich nette Lösung, andere Antworten sieht aus wie schmutzige Tricks oder nicht sinnvoll. Stimme ab! – Klimenkomud
Seit Frage des OP mit ‚AngularJS‘ markiert wurde, wäre die sauberste Lösung wahrscheinlich eine Richtlinie zu verwenden sein. Mehrere Lösungen für diesen Ansatz haben hier zuvor erklärt worden:
Verwenden Sie Angular in Ihrem Projekt oder Sie vertippt nur den Tag? –
'1e1' ist eine gültige Zahl, das ist [exponentielle Notation] (https://en.wikipedia.org/wiki/Scientific_notation#E_notation). – Aaron
@Aaron, Sie haben Recht, aber OP will nur Zahlen anzeigen. –