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

Anmerkung: Dies ist eine aktualisierte Antwort. Die Kommentare unten beziehen sich auf eine alte Version, die mit Keycodes herumspielte.

JavaScript

Versuchen Sie es selbst auf JSFiddle .

Sie können die Eingabewerte eines Textes filtern <input> mit den folgenden setInputFilter (unterstützt Kopieren+Einfügen, Ziehen+Ablegen, Tastenkombinationen, Kontextmenüoperationen, nicht eintippbare Tasten, die Cursorposition, verschiedene Tastaturlayouts, Gültigkeitsfehlermeldung und alle Browser seit IE 9 ) :

// Restricts input for the given textbox to the given inputFilter function.
function setInputFilter(textbox, inputFilter, errMsg) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout"].forEach(function(event) {
    textbox.addEventListener(event, function(e) {
      if (inputFilter(this.value)) {
        // Accepted value
        if (["keydown","mousedown","focusout"].indexOf(e.type) >= 0){
          this.classList.remove("input-error");
          this.setCustomValidity("");
        }
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        // Rejected value - restore the previous one
        this.classList.add("input-error");
        this.setCustomValidity(errMsg);
        this.reportValidity();
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        // Rejected value - nothing to restore
        this.value = "";
      }
    });
  });
}

Sie können nun die setInputFilter Funktion, um einen Eingangsfilter zu installieren:

setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp
}, "Only digits and '.' are allowed");

Wenden Sie Ihren bevorzugten Stil auf die Klasse input-error an. Hier ist ein Vorschlag:

.input-error{
  outline: 1px solid red;
}

Siehe die JSFiddle-Demo für weitere Beispiele für Eingabefilter. Beachten Sie auch, dass Sie immer noch muss eine serverseitige Validierung durchführen!

TypScript

Hier ist eine TypeScript-Version davon.

function setInputFilter(textbox: Element, inputFilter: (value: string) => boolean, errMsg: string): void {
    ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout"].forEach(function(event) {
        textbox.addEventListener(event, function(this: (HTMLInputElement | HTMLTextAreaElement) & {oldValue: string; oldSelectionStart: number | null, oldSelectionEnd: number | null}) {
            if (inputFilter(this.value)) {
                this.oldValue = this.value;
                this.oldSelectionStart = this.selectionStart;
                this.oldSelectionEnd = this.selectionEnd;
            } else if (Object.prototype.hasOwnProperty.call(this, 'oldValue')) {
                this.value = this.oldValue;
                if (this.oldSelectionStart !== null &&
                    this.oldSelectionEnd !== null) {
                    this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                }
            } else {
                this.value = "";
            }
        });
    });
}

jQuery

Es gibt auch eine jQuery-Version davon. Siehe diese Antwort .

HTML 5

HTML 5 hat eine native Lösung mit <input type="number"> (siehe die Spezifikation ), aber beachten Sie, dass die Browserunterstützung unterschiedlich ist:

• Die meisten Browser validieren die Eingaben erst beim Absenden des Formulars und nicht schon beim Eintippen.
• Die meisten mobilen Browser unterstützen nicht die step , min y max Attribute.
• Chrome (Version 71.0.3578.98) erlaubt dem Benutzer immer noch die Eingabe der Zeichen e y E ins Feld. Siehe auch diese Frage .
• Firefox (Version 64.0) und Edge (EdgeHTML Version 17.17134) erlauben dem Benutzer immer noch die Eingabe von jede Text in das Feld ein.

Versuchen Sie es selbst auf w3schools.com .

Answer 2

Verwenden Sie dieses DOM

<input type='text' onkeypress='validate(event)' />

Und dieses Skript

function validate(evt) {
  var theEvent = evt || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

Answer 3

Hier ist ein einfaches Beispiel, das genau eine Dezimalstelle zulässt, aber nicht mehr:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" />

Wie jemand weiter unten kommentiert hat, ist die obige Lösung nicht mit führenden Nullen umgehen. Wenn Ihr spezieller Anwendungsfall erfordert, dass diese nicht erlaubt sind, können Sie das obige Muster wie folgt ergänzen:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/^0[^.]/, '0');" />

Dies wird es ermöglichen 0.123 o .123 aber nicht 0123 o 00.123 .

Answer 4

Ich habe lange und intensiv nach einer guten Antwort auf diese Frage gesucht, und wir brauchen dringend <input type="number" aber in Ermangelung dessen sind diese 2 Möglichkeiten die prägnantesten, die mir eingefallen sind:

<input type="text" 
       onkeyup="this.value=this.value.replace(/[^\d]/,'')">

Wenn Sie es nicht mögen, dass das nicht akzeptierte Zeichen für den Bruchteil einer Sekunde angezeigt wird, bevor es gelöscht wird, ist die folgende Methode meine Lösung. Beachten Sie die zahlreichen zusätzlichen Bedingungen, um zu vermeiden, dass alle Arten von Navigation und Hotkeys deaktiviert werden. Wenn jemand weiß, wie man das kompakter machen kann, lassen Sie es uns wissen!

<input type="text" 
onkeydown="return ( event.ctrlKey || event.altKey 
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9) 
                    || (event.keyCode>34 && event.keyCode<40) 
                    || (event.keyCode==46) )">

Answer 5

Die meisten Antworten haben die Schwäche, Schlüsselereignisse zu verwenden .

Viele der Antworten würden Ihre Fähigkeit einschränken, Textauswahl mit Tastaturmakros, Kopieren+Einfügen und mehr unerwünschtes Verhalten zu tun, andere scheinen von bestimmten jQuery-Plugins abzuhängen, was Fliegen mit Maschinengewehren tötet.

Diese einfache Lösung scheint für mich plattformübergreifend am besten zu funktionieren, unabhängig vom Eingabemechanismus (Tastatureingabe, Kopieren+Einfügen, Rechtsklick-Kopieren+Einfügen, Sprache-zu-Text usw.). Alle Textauswahl-Tastaturmakros würden weiterhin funktionieren, und es würde sogar die Möglichkeit einschränken, einen nicht-numerischen Wert per Skript zu setzen.

function forceNumeric(){
    var $input = $(this);
    $input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);