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

2 Lösungen:

Verwenden Sie einen Formularvalidator (zum Beispiel mit jQuery-Validierungs-Plugin )

Führen Sie während des Onblur-Ereignisses (d.h. wenn der Benutzer das Feld verlässt) des Eingabefeldes eine Prüfung mit dem regulären Ausdruck durch:

<script type="text/javascript">
function testField(field) {
    var regExpr = new RegExp("^\d*\.?\d*$");
    if (!regExpr.test(field.value)) {
      // Case of error
      field.value = "";
    }
}

</script>

<input type="text" ... onblur="testField(this);"/>

Answer 2

// In einer JavaScript-Funktion (kann HTML oder PHP verwenden).

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

In Ihrer Formulareingabe:

<input type=text name=form_number size=20 maxlength=12 onkeypress='return isNumberKey(event)'>

Mit Eingabe max. (Diese oben erlaubt eine 12-stellige Zahl)

Answer 3

Ein weiteres Beispiel, bei dem Sie kann nur Zahlen in das Eingabefeld eingeben, kann nicht Buchstaben

<input type="text" class="form-control" id="phone" name="phone" placeholder="PHONE" spellcheck="false" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">

Answer 4

Ein sicherer Ansatz besteht darin, den Wert der Eingabe zu überprüfen, anstatt Tastendrücke zu kapern und zu versuchen, keyCodes zu filtern.

Auf diese Weise kann der Benutzer die Pfeiltasten, die Umschalttasten, die Rücktaste, die Löschtaste, nicht standardmäßige Tastenkombinationen, die Maus zum Einfügen, das Ziehen und Ablegen von Text und sogar Eingaben zur Barrierefreiheit verwenden.

Das folgende Skript erlaubt positive und negative Zahlen

1
10
100.0
100.01
-1
-1.0
-10.00
1.0.0 //not allowed

var input = document.getElementById('number');
input.onkeyup = input.onchange = enforceFloat;

//enforce that only a float can be inputed
function enforceFloat() {
  var valid = /^\-?\d+\.\d*$|^\-?[\d]*$/;
  var number = /\-\d+\.\d*|\-[\d]*|[\d]+\.[\d]*|[\d]+/;
  if (!valid.test(this.value)) {
    var n = this.value.match(number);
    this.value = n ? n[0] : '';
  }
}

<input id="number" value="-3.1415" placeholder="Type a number" autofocus>

EDIT: Ich habe meine alte Antwort entfernt, weil ich denke, dass sie jetzt veraltet ist.

Answer 5

Hierfür können Sie Muster verwenden:

<input id="numbers" pattern="[0-9.]+" type="number">

Hier sehen Sie die vollständigen Tipps für die mobile Website .