Eingabe nur von Zahlen in JavaScript

1. Verwendung von das Feldattribut number und Set Condition für keyCode in JavaScript
2. Verwendung von das Feldattribut input und Set Condition für keyCode in JavaScript

Keine bestimmte Methode oder Eigenschaft in JavaScript wird das HTML-Eingabefeld direkt aktivieren, um nur Werte vom Typ number zu akzeptieren. Vielmehr gibt es ein Attribut number für das input-Feld, das nur Zahlen vom Typ Zahlen im Eingabefeld annimmt.

Eine andere Möglichkeit, nur die Zahlen zu filtern, besteht darin, den Feldtyp input auf input zu setzen, was bedeutet, dass fast alle möglichen Eingaben möglich sind. Dabei werden die alphanumerischen Werte berücksichtigt.

Die im JavaScript-Code implizierten spezifischen Bedingungen werden dann so gefiltert, dass nur die Zahlen akzeptiert werden.

In den folgenden Fällen werden wir mit dem Ereignis keypress arbeiten und seinen keyCode abrufen. Und später werden wir basierend auf unserem Motiv einige Bedingungen festlegen, um nur die Zahlentypdaten zu validieren.

Ein Beispiel hat das Attribut number und das andere das Attribut input für das Eingabefeld.

Verwendung von das Feldattribut number und Set Condition für keyCode in JavaScript

Unser Beispiel wird ein Eingabefeld haben, das einer JavaScript-Codebasis entspricht. Zunächst holen wir uns den keyCode über event.keyCode oder event.which.

Dieser keyCode und which funktioniert ähnlich und ist von Browser zu Browser unterschiedlich. Letztendlich filtern wir also die Werte basierend auf den Codes.

Lassen Sie uns den Codezaun überprüfen.

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input name="someid" type="number" onkeypress="isNumberKey(event)"/>
<div>
</div>
<script>
function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}
  $(document).ready(function(){
  $("input").keydown(function(event){
    $("div").html("Key: " + event.which);
  });
});
</script>

Ausgabe:

Wie man sieht, haben wir a=65, b=66 und c=67 gedrückt, aber diese Werte wurden nicht akzeptiert. Und später wurden die Werte 4 und 2 in das Eingabefeld eingetragen.

Verwendung von das Feldattribut input und Set Condition für keyCode in JavaScript

Wir werden den JavaScript-Code für unser Eingabefeld in diesem Segment ähnlich setzen, aber dieses Attribut wird auf input gesetzt. Standardmäßig akzeptiert das Attribut des Typs Number Zahlen und schließt andere Zeichen aus, aber im Fall des Typs input haben wir das Privileg, andere Zeichen wie Backspace, Buchstaben usw. einzugeben.

Hier validiert unser JavaScript-Code nur die Zählung der Zahlen.

Code-Auszug:

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input type="input" id="edit1" size="11" maxlength="10" />
<div>
</div>
<script>
$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});
function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode === 8 || event.keyCode === 46) {
        return true;
    } else if ( key < 48 || key > 57 ) {
        return false;
    } else {
    	return true;
    }
};
   $(document).ready(function(){
  $("input").keydown(function(event){
    $("div").html("Key: " + event.which);
  });
});
</script>

Ausgabe: