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

^{Hinweis: Dies ist eine aktualisierte Antwort. Die folgenden Kommentare beziehen sich auf eine alte Version, die mit Schlüsselcodes herumgespielt hat.}

JavaScript

Probieren Sie es selbst auf JSFiddle .

Sie können die Eingabewerte eines Textes <input>mit der folgenden setInputFilterFunktion filtern (unterstützt Kopieren + Einfügen, Ziehen + Ablegen, Tastaturkürzel, Kontextmenüoperationen, nicht typisierbare Tasten, die Caret-Position, verschiedene Tastaturlayouts und alle Browser seit IE 9 ). ::

// Restricts input for the given textbox to the given inputFilter function.
function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  });
}

Mit der setInputFilterFunktion können Sie jetzt einen Eingabefilter installieren:

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

Weitere Beispiele für Eingabefilter finden Sie in der JSFiddle-Demo . Beachten Sie auch, dass Sie noch eine serverseitige Validierung durchführen müssen!

Typoskript

Hier ist eine TypeScript-Version davon.

function setInputFilter(textbox: Element, inputFilter: (value: string) => boolean): void {
    ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].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 bietet eine native Lösung mit <input type="number">(siehe Spezifikation ). Beachten Sie jedoch, dass die Browserunterstützung unterschiedlich ist:

• Die meisten Browser überprüfen die Eingabe nur beim Senden des Formulars und nicht beim Eingeben.
• Die meisten mobilen Browser unterstützen nicht die step, minund maxAttribute.
• In Chrome (Version 71.0.3578.98) kann der Benutzer weiterhin die Zeichen eund Edas Feld eingeben . Siehe auch diese Frage .
• Mit Firefox (Version 64.0) und Edge (EdgeHTML Version 17.17134) kann der Benutzer weiterhin beliebigen Text in das Feld eingeben .

Probieren Sie es selbst auf w3schools.com .

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();
  }
}

Ich habe lange und intensiv nach einer guten Antwort darauf gesucht, und wir brauchen dringend <input type="number", aber kurz gesagt, diese beiden sind die prägnantesten Möglichkeiten, die ich finden könnte:

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

Wenn Sie das nicht akzeptierte Zeichen, das vor dem Löschen für den Bruchteil einer Sekunde angezeigt wird, nicht mögen, 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 verdichtet, lass 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) )">

Hier ist eine einfache, die genau eine Dezimalstelle zulässt, aber nicht mehr:

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

Und noch ein Beispiel, das für mich großartig funktioniert:

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;
    }
};

Auch an Tastendruckereignis anhängen

$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});

Und HTML:

<input type="input" id="edit1" value="0" size="5" maxlength="5" />

Hier ist ein jsFiddle-Beispiel

HTML5 hat <input type=number>, was für Sie richtig klingt. Derzeit wird es nur von Opera nativ unterstützt, es gibt jedoch ein Projekt mit einer JavaScript-Implementierung.

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

Viele der Antworten würden Ihre Fähigkeit zur Textauswahl mit Tastaturmakros, Kopieren + Einfügen und unerwünschtem Verhalten einschränken, andere scheinen von bestimmten jQuery-Plugins abhängig zu sein, die Fliegen mit Maschinengewehren töten.

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

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

Ich habe mich für eine Kombination der beiden hier genannten Antworten entschieden, d. H.

<input type="number" />

und

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

<input type="text" onkeypress="return isNumberKey(event);">

HTML5 unterstützt reguläre Ausdrücke, sodass Sie Folgendes verwenden können:

<input id="numbersOnly" pattern="[0-9.]+" type="text">

Warnung: Einige Browser unterstützen dies noch nicht.

JavaScript

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

    if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
    // numbers   
    key >= 48 && key <= 57 ||
    // Numeric keypad
    key >= 96 && key <= 105 ||
    // Backspace and Tab and Enter
    key == 8 || key == 9 || key == 13 ||
    // Home and End
    key == 35 || key == 36 ||
    // left and right arrows
    key == 37 || key == 39 ||
    // Del and Ins
    key == 46 || key == 45) {
        // input is VALID
    }
    else {
        // input is INVALID
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

zusätzlich können Sie Komma, Punkt und Minus (, .-) hinzufügen

  // comma, period and minus, . on keypad
  key == 190 || key == 188 || key == 109 || key == 110 ||

HTML

<input type="text" onkeydown="validateNumber(event);"/ >

So einfach....

// 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 Eingang max. (Diese oben erlaubt eine 12-stellige Nummer)

2 Lösungen:

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

Führen Sie eine Überprüfung während des Ereignisses onblur (dh wenn der Benutzer das Feld verlässt) des Eingabefelds 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);"/>

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

Auf diese Weise kann der Benutzer Tastaturpfeile, Modifizierertasten, Rücktaste, Löschen, nicht standardmäßige Tastaturen verwenden, mit der Maus einfügen, Text per Drag & Drop verwenden und sogar Eingabehilfen 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.

Sie können Muster dafür verwenden:

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

Hier sehen Sie die vollständigen Tipps zur Benutzeroberfläche der mobilen Website .

Nachfolgend finden Sie die genannte Lösung. In diesen Benutzer in der Lage sein , können nur eingeben numericWert, kann auch Benutzer nicht in der Lage sein copy, paste, dragund dropin der Eingabe.

Zulässige Zeichen

0,1,2,3,4,5,6,7,8,9

Nicht erlaubte Charaktere und Charaktere durch Ereignisse

• Alphabetischer Wert
• Spezielle Charaktere
• Kopieren
• Einfügen
• Ziehen
• Fallen

$(document).ready(function() {
  $('#number').bind("cut copy paste drag drop", function(e) {
      e.preventDefault();
  });     
});
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="form-control" name="number" id="number" onkeypress="return isNumberKey(event)" placeholder="Enter Numeric value only">

Lassen Sie mich wissen, wenn es nicht funktioniert.

Wenn Sie dem Gerät (möglicherweise einem Mobiltelefon) einen Vorschlag zwischen alphanumerisch oder numerisch vorschlagen möchten, können Sie diesen verwenden <input type="number">.

Ein weiteres Beispiel , wo Sie können nur Zahlen in das Eingabefeld hinzufügen, können 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');">

Eine kurze und süße Implementierung mit jQuery und replace (), anstatt event.keyCode oder event.which zu betrachten:

$('input.numeric').live('keyup', function(e) {
  $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

Nur kleiner Nebeneffekt, dass der getippte Buchstabe kurz erscheint und STRG / CMD + A sich etwas seltsam zu verhalten scheint.

input type="number" ist ein HTML5-Attribut.

Im anderen Fall hilft Ihnen dies:

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

<input type="number" name="somecode" onkeypress="return isNumberKey(event)"/>

JavaScript-Code:

function validate(evt)
{
    if(evt.keyCode!=8)
    {
        var theEvent = evt || window.event;
        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();
            }
        }
    }

HTML Quelltext:

<input type='text' name='price' value='0' onkeypress='validate(event)'/>

funktioniert perfekt, da der Backspace-Schlüsselcode 8 ist und ein Regex-Ausdruck dies nicht zulässt, sodass der Fehler auf einfache Weise umgangen werden kann :)

Eine einfache Möglichkeit, dieses Problem zu beheben, besteht darin, eine jQuery-Funktion zu implementieren, um die in das Textfeld eingegebenen Zeichen mit Regex zu überprüfen. Beispiel:

Ihr HTML-Code:

<input class="integerInput" type="text">

Und die js-Funktion mit jQuery

$(function() {
    $('.integerInput').on('input', function() {
      this.value = this.value
        .replace(/[^\d]/g, '');// numbers and decimals only

    });
});

$(function() {
        $('.integerInput').on('input', function() {
          this.value = this.value
            .replace(/[^\d]/g, '');// numbers and decimals only
            
        });
    });

<script
			  src="https://code.jquery.com/jquery-2.2.4.min.js"
			  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
			  crossorigin="anonymous">
</script>

<input type="text" class="integerInput"/>


		

Nur eine andere Variante mit jQuery

$(".numeric").keypress(function() {
    return (/\d/.test(String.fromCharCode(event.which) ))
});

Verwenden Sie jetzt type = "number". Dieses Attribut wird in den meisten Browsern unterstützt

<input type="number" maxlength="3" ng-bind="first">

Sie können auch den Eingabewert (der standardmäßig als Zeichenfolge behandelt wird) mit sich selbst vergleichen, der als numerisch erzwungen wird, z.

if(event.target.value == event.target.value * 1) {
    // returns true if input value is numeric string
}

Sie müssen dies jedoch an Ereignisse wie Keyup usw. binden.

<input name="amount" type="text" value="Only number in here"/> 

<script>
    $('input[name=amount]').keyup(function(){
        $(this).val($(this).val().replace(/[^\d]/,''));
    });
</script>

Ich habe einige großartige Antworten gesehen, aber ich mag sie so klein und einfach wie möglich, also wird vielleicht jemand davon profitieren. Ich würde Javascript Number()und isNaNFunktionen wie diese verwenden:

if(isNaN(Number(str))) {
   // ... Exception it is NOT a number
} else {
   // ... Do something you have a number
}

Hoffe das hilft.

Verwenden Sie dieses DOM:

<input type = "text" onkeydown = "validate(event)"/>

Und dieses Skript:

validate = function(evt)
{
    if ([8, 46, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36].indexOf(evt.keyCode || evt.which) == -1)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

... ODER dieses Skript ohne indexOf mit zwei for...

validate = function(evt)
{
    var CharValidate = new Array("08", "046", "039", "948", "235");
    var number_pressed = false;
    for (i = 0; i < 5; i++)
    {
        for (Ncount = 0; Ncount < parseInt(CharValidate[i].substring(0, 1)) + 1; Ncount++)
        {
            if ((evt.keyCode || evt.which) == parseInt(CharValidate[i].substring(1, CharValidate[i].lenght)) + Ncount)
            {
                number_pressed = true;
            }
        }
    }
    if (number_pressed == false)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

Ich habe das onkeydown-Attribut anstelle von onkeypress verwendet, da das onkeydown-Attribut vor dem onkeypress-Attribut überprüft wird. Das Problem wäre im Google Chrome-Browser.

Mit dem Attribut "onkeypress" wäre TAB mit "verhindernDefault" auf Google Chrome nicht steuerbar, mit dem Attribut "onkeydown" wird TAB jedoch steuerbar!

ASCII-Code für TAB => 9

Das erste Skript enthält weniger Code als das zweite. Das Array der ASCII-Zeichen muss jedoch alle Schlüssel enthalten.

Das zweite Skript ist viel größer als das erste, aber das Array benötigt nicht alle Schlüssel. Die erste Ziffer an jeder Position des Arrays gibt an, wie oft jede Position gelesen wird. Für jeden Messwert wird 1 auf den nächsten erhöht. Zum Beispiel:




NCount = 0

48 + NCount = 48

NCount + +

48 + NCount = 49

NCount + +

...

48 + NCount = 57




Bei numerischen Schlüsseln sind es nur 10 (0 - 9), aber wenn sie 1 Million wären, wäre es nicht sinnvoll, ein Array mit all diesen Schlüsseln zu erstellen.

ASCII-Codes:

• 8 ==> (Rücktaste);
• 46 => (Löschen);
• 37 => (linker Pfeil);
• 39 => (rechter Pfeil);
• 48 - 57 => (Zahlen);
• 36 => (zu Hause);
• 35 => (Ende);

Dies ist eine verbesserte Funktion:

function validateNumber(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}

Der beste Weg (ALLE Arten von Zahlen zulassen - echt negativ, echt positiv, ganzzahlig negativ, ganzzahlig positiv) ist:

$(input).keypress(function (evt){
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode( key );
    var regex = /[-\d\.]/; // dowolna liczba (+- ,.) :)
    var objRegex = /^-?\d*[\.]?\d*$/;
    var val = $(evt.target).val();
    if(!regex.test(key) || !objRegex.test(val+key) || 
            !theEvent.keyCode == 46 || !theEvent.keyCode == 8) {
        theEvent.returnValue = false;
        if(theEvent.preventDefault) theEvent.preventDefault();
    };
}); 

Dies ist die erweiterte Version der geowa4-Lösung . Unterstützt minund maxAttribute. Wenn die Zahl außerhalb des Bereichs liegt, wird der vorherige Wert angezeigt.

Sie können es hier testen.

Verwendungszweck: <input type=text class='number' maxlength=3 min=1 max=500>

function number(e) {
var theEvent = e || window.event;
var key = theEvent.keyCode || theEvent.which;
if(key!=13&&key!=9){//allow enter and tab
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key)) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
    }   
  }
}

$(document).ready(function(){
    $("input[type=text]").filter(".number,.NUMBER").on({
        "focus":function(e){
         $(e.target).data('oldValue',$(e.target).val());
            },
        "keypress":function(e){
                e.target.oldvalue = e.target.value;
                number(e);
            },
        "change":function(e){
            var t = e.target;
            var min = $(t).attr("min");
            var max = $(t).attr("max");
            var val = parseInt($(t).val(),10);          
            if( val<min || max<val)
                {
                    alert("Error!");
                    $(t).val($(t).data('oldValue'));
                }

            }       
    });     
});

Wenn die Eingänge dynamisch sind, verwenden Sie Folgendes:

$(document).ready(function(){
    $("body").on("focus","input[type=text].number,.NUMBER",function(e){
        $(e.target).data('oldValue',$(e.target).val());
    }); 
    $("body").on("keypress","input[type=text].number,.NUMBER",function(e){
        e.target.oldvalue = e.target.value;
        number(e);
    }); 
    $("body").on("change","input[type=text].number,.NUMBER",function(e){
        var t = e.target
        var min = $(t).attr("min");
        var max = $(t).attr("max");
        var val = parseInt($(t).val());         
        if( val<min || max<val)
            {
                alert("Error!");
                $(t).val($(t).data('oldValue'));
            }
    }); 
});