HTML-Texteingabe erlaubt nur numerische Eingaben

Question

Gibt es eine schnelle Möglichkeit, eine HTML-Texteingabe ( <input type=text /> ), um nur numerische Tastenanschläge (plus '.') zuzulassen?

Answer 1

Ich habe es etwas optimiert, aber es braucht noch viel mehr Arbeit, um mit dem JavaScript-artigen Weg übereinzustimmen.

function validateNumber(myEvent,decimal) {
    var e = myEvent || window.event;
    var key = e.keyCode || e.which;

    if (e.shiftKey) {
    } else if (e.altKey) {
    } else if (e.ctrlKey) {
    } else if (key === 48) { // 0
    } else if (key === 49) { // 1
    } else if (key === 50) { // 2
    } else if (key === 51) { // 3
    } else if (key === 52) { // 4
    } else if (key === 53) { // 5
    } else if (key === 54) { // 6
    } else if (key === 55) { // 7
    } else if (key === 56) { // 8
    } else if (key === 57) { // 9

    } else if (key === 96) { // Numeric keypad 0
    } else if (key === 97) { // Numeric keypad 1
    } else if (key === 98) { // Numeric keypad 2
    } else if (key === 99) { // Numeric keypad 3
    } else if (key === 100) { // Numeric keypad 4
    } else if (key === 101) { // Numeric keypad 5
    } else if (key === 102) { // Numeric keypad 6
    } else if (key === 103) { // Numeric keypad 7
    } else if (key === 104) { // Numeric keypad 8
    } else if (key === 105) { // Numeric keypad 9

    } else if (key === 8) { // Backspace
    } else if (key === 9) { // Tab
    } else if (key === 13) { // Enter
    } else if (key === 35) { // Home
    } else if (key === 36) { // End
    } else if (key === 37) { // Left Arrow
    } else if (key === 39) { // Right Arrow
    } else if (key === 190 && decimal) { // decimal
    } else if (key === 110 && decimal) { // period on keypad
    // } else if (key === 188) { // comma
    } else if (key === 109) { // minus
    } else if (key === 46) { // Del
    } else if (key === 45) { // Ins
    } else {
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

Und dann heißt es "via":

$('input[name=Price]').keydown(function(myEvent) {
    validateNumber(myEvent,true);
});

Answer 2

Rufen Sie diese Funktion auf, wenn Sie bereit sind, die Daten zu validieren. Ich habe hier ein Textfeld verwendet

In meinem HTML:

<input type="button" value="Check IT!" onclick="check(document.getElementById('inputboxToValidate').value);" />

In meinem JavaScript-Code:

function check(num){
    var onlynumbers = true
    for (var i = 0; i < (num.length - 1); i++) {
        if (num.substr(i, 1) != "0" || num.substr(i, 1) != "1" || num.substr(i, 1) != "2" || num.substr(i, 1) != "3" || num.substr(i, 1) != "4" || num.substr(i, 1) != "5" || num.substr(i, 1) != "6" || num.substr(i, 1) != "7" || num.substr(i, 1) != "8" || num.substr(i, 1) != "9") {
            alert("please make sure that only numbers have been entered in the Quantaty box");
            onlynumbers = false
        }
    }
    if (onlynumbers == true) {

        //Execute Code
    }
}

Answer 3

Reguläre Ausdrücke und die Match-Funktion können in dieser Situation gut funktionieren. Ich habe z. B. das Folgende verwendet, um 4 Eingabefelder zu überprüfen, die als Koordinaten in einem Diagramm dienten. Das funktioniert einigermaßen gut.

function validateInput() {
   if (jQuery('#x1').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null || 
       jQuery('#x2').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null || 
       jQuery('#y1').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null ||
       jQuery('#y2').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null) {
         alert("A number must be entered for each coordinate, even if that number is 0. Please try again.");
         location.reload();
   }
}

Answer 4

Ich hoffe, dass ich hier nicht mit einem hässlichen Stock auf ein totes Pferd schlage, aber ich verwende dies für meine Website Mengeneingabe, es erlaubt nur Zahlen von 1 bis 99.

Versuchen Sie es: https://jsfiddle.net/83va5sb9/

      <input min="1" type="text" id="quantity" name="quantity" value="1"
      onKeyUp="numbersonly()">

      <script>
    function numbersonly() {
      var str = document.getElementById("quantity").value
      var newstr = ""
      for (i = 0; i < str.length; i++) {
        for (ii = 1; ii < 10; ii++) {
          if (str.charAt(i).indexOf(ii) > -1) {
            newstr += str.charAt(i)
          }
        }
      }
      if (newstr == "") {
        newstr = 1
      }
      if (parseInt(newstr) > 99) {
        newstr = 99
      }
      document.getElementById("quantity").value = newstr
    }

    </script>

Answer 5

Wenn es darum geht, UX narrensicher zu machen, sollte man immer versuchen, einen Bezugspunkt für die "Intelligenz des Nutzers" zu behalten.

Auch wenn die Vernachlässigung aller anderen Elemente außer Zahlen, Punkt und Bindestrich die perfekte Wahl zu sein scheint, sollten Sie auch in Betracht ziehen, sie einen beliebigen Inhalt eingeben, und wenn sie fertig sind, die Eingabe bereinigen; wenn es sich nicht um eine gültige Zahl handelt, Fehler anzeigen . Diese Methode würde sicherstellen, dass das Ergebnis immer gültig ist, egal was der Benutzer tut. Wenn der Benutzer so naiv ist, dass er die Warnungen und Fehlermeldungen nicht versteht, wird es ihn nur noch mehr verwirren, wenn er eine Taste drückt und sieht, dass nichts passiert (wie beim Schlüsselcodevergleich).

Auch bei Formularen sind die Validierung und die Anzeige von Fehlermeldungen fast eine Notwendigkeit. Die Vorkehrungen könnten also bereits vorhanden sein. Hier ist der Algorithmus:

1. Wenn Sie den Fokus verlieren oder ein Formular einreichen, tun Sie Folgendes.

   1.1. Inhalt aus der Eingabe lesen und parseFloat auf das Ergebnis anwenden

   1.2. Wenn das Ergebnis eine Nicht-zugängliche-Zahl (NaN) ist, wird das Eingabefeld zurückgesetzt und ein Pop-up-Fenster Fehlermeldung : "Bitte geben Sie eine gültige Nummer ein: z.B.. 235 oder -654 oder 321.526 oder -6352.646584".

   1.3. Andernfalls, wenn String(Ergebnis)!==(Inhalt von Eingabe), Wert des Feldes in Ergebnis ändern und anzeigen Warnmeldung : "Der Wert, den Sie eingegeben haben, wurde geändert. Die Eingabe muss eine gültige Zahl sein: z.B. 235 oder -654 oder 321.526 oder -6352.646584". Bei einem Feld, das keinen unbestätigten Wert zulässt, kann diese Bedingung zu Schritt 1.2 hinzugefügt werden.

   1.4. Andernfalls tun Sie nichts.

Diese Methode bietet auch den zusätzlichen Vorteil, dass Sie Validierungen auf der Grundlage von Mindestwert, Höchstwert, Dezimalstellen usw. falls erforderlich. Sie müssen nur diese Operationen am Ergebnis nach Schritt 1.2 durchführen.

Benachteiligungen:

1. Bei der Eingabe kann der Benutzer einen beliebigen Wert eingeben, bis der Fokus verloren geht oder das Formular abgeschickt wird. Wären die Anweisungen zum Ausfüllen des Feldes jedoch klar genug, würde dies in 90 % der Fälle nicht vorkommen.

2. Wenn in Schritt 1.3 eine Warnung angezeigt wird, könnte diese vom Benutzer übersehen werden und zu einer ungewollten Eingabe führen. Eine Fehlermeldung oder eine ordnungsgemäße Anzeige der Warnung würde dieses Problem lösen.

3. Geschwindigkeit. Dies kann in Mikrosekunden langsamer sein als die Regex-Methode.

Vorteile: Vorausgesetzt, der Benutzer verfügt über Grundkenntnisse zum Lesen und Verstehen,

1. Hochgradig anpassbar mit Optionen.

2. Funktioniert browserübergreifend und sprachunabhängig.

3. Nutzt die bereits in einem Formular vorhandenen Funktionen zur Anzeige von Fehlern und Warnungen.