web-dev-qa-db-de.com

HTML-Texteingabe erlaubt nur numerische Eingabe

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

698
Julius A

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

JavaScript

Mit der unten stehenden Funktion setInputFilter können Sie beliebige Eingabefilter für einen Text <input> Verwenden, einschließlich verschiedener numerischer Filter (siehe unten).

Im Gegensatz zu den meisten anderen Lösungen unterstützt dieses korrekt Kopieren + Einfügen, Ziehen + Ablegen, alle Tastaturkürzel, alle Kontextmenüoperationen, alle nicht tippbaren Tasten (z. B. Cursor- und Navigationstasten). Die Caret-Position, alle Tastaturlayouts aller Sprachen und Plattformen und alle Browser seit IE 9 .

Probieren Sie es aus auf JSFiddle .

// Restricts input for the given textbox to the given inputFilter.
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);
      }
    });
  });
}

// Restrict input to digits and '.' by using a regular expression filter.
setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value);
});

Einige Eingabefilter, die Sie möglicherweise verwenden möchten:

  • Integer Werte (nur positiv):
    /^\d*$/.test(value)
  • Integer Werte (positiv und bis zu einer bestimmten Grenze):
    /^\d*$/.test(value) && (value === "" || parseInt(value) <= 500)
  • Integer Werte (sowohl positiv als auch negativ):
    /^-?\d*$/.test(value)
  • Gleitkommawerte (wobei sowohl . Als auch , Als Dezimaltrennzeichen zulässig sind):
    /^-?\d*[.,]?\d*$/.test(value)
  • Währungswerte (d. H. Höchstens zwei Dezimalstellen):
    /^-?\d*[.,]?\d{0,2}$/.test(value)
  • Nur von A bis Z (d. H. Lateinische Grundbuchstaben):
    /^[a-z]*$/i.test(value)
  • Nur lateinische Buchstaben (d. H. Englisch und die meisten europäischen Sprachen, siehe https://unicode-table.com für Details zu Unicode-Zeichenbereichen):
    /^[a-z\u00c0-\u024f]*$/i.test(value)
  • Hexadezimalwerte :
    /^[0-9a-f]*$/i.test(value)

Beachten Sie, dass Sie immer noch muss serverseitige Validierung durchführen!

jQuery

Es gibt auch eine jQuery-Version davon. Siehe diese Antwort oder probiere es selbst auf JSFiddle .

HTML 5

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

  • Die meisten Browser validieren die Eingabe nur beim Absenden des Formulars und nicht beim Tippen.
  • Die meisten mobilen Browser unterstützen die Attribute step, min und max nicht.
  • In Chrome (Version 71.0.3578.98) kann der Benutzer weiterhin die Zeichen e und E in das Feld eingeben. Siehe auch diese Frage .
  • Mit Firefox (Version 64.0) und Edge (EdgeHTML Version 17.17134) kann der Benutzer weiterhin any Text in das Feld eingeben.

Probieren Sie es aus auf w3schools.com .

1034
inspite

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

Ich habe lange und intensiv nach einer guten Antwort darauf gesucht, und wir brauchen dringend <input type="number", aber davon abgesehen sind diese 2 die prägnantesten Möglichkeiten, auf die ich kommen könnte:

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

Wenn Sie es nicht mögen, wenn der nicht akzeptierte Charakter einen Sekundenbruchteil anzeigt, bevor er 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 verdichtet, lasst 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) )">
120
user235859

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');" />
60
billynoah

Und noch ein Beispiel, das für mich gut 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;
    }
};

Zum Keypress-Ereignis hinzufügen

$(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

53
Vasyl

HTML5 hat <input type=number>, was für Sie richtig klingt. Derzeit unterstützt nur Opera nativ, aber es gibt ein Projekt das eine JavaScript-Implementierung hat.

45
Ms2ger

Die meisten Antworten hier haben die Schwäche der Verwendung von Schlüsselereignissen

Viele der Antworten würden Ihre Fähigkeit zur Textauswahl mit Tastaturmakros, Kopieren + Einfügen und mehr unerwünschtes Verhalten einschränken, andere scheinen auf bestimmte jQuery-Plugins angewiesen zu sein, die Fliegen mit Maschinengewehren töten. 

Diese einfache Lösung scheint für mich plattformübergreifend am besten zu funktionieren, unabhängig von den Eingabemechanismen (Tastendruck, Kopieren + Einfügen, Rechtsklick Kopieren + Einfügen, Sprachausgabe usw.). Alle Tastaturmakros für die Textauswahl funktionieren weiterhin, und die Möglichkeit, einen nicht-numerischen Wert per Skript festzulegen, wird sogar eingeschränkt.

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

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);">

40
Mahendra Liya

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

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

Warnung: Einige Browser unterstützen dies noch nicht.

30
james.garriss

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 Minuszeichen (, .-) hinzufügen. 

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

HTML

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

2 Lösungen:

Verwenden Sie einen Formular-Validator (zum Beispiel mit jQuery Validation Plugin )

Überprüfen Sie das Ereignis onblur (d. H. Wenn der Benutzer das Feld verlässt) des Eingabefelds mit dem regulären Ausdruck:

<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);"/>
15
Romain Linsolas

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 deiner Formulareingabe:

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

Bei Eingabe max. (Diese Angaben ermöglichen eine 12-stellige Nummer)

14
Rizal Aditya

Hier finden Sie die Lösung. In diesem Benutzer kann nur der Wert numeric eingegeben werden. Außerdem kann der Benutzer copy, paste, drag und drop nicht in die Eingabe eingeben. 

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">

Lass es mich wissen, wenn es nicht funktioniert.

12

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

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

12
Vitim.us

Sie können Muster dafür verwenden:

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

Hier können Sie die vollständigen Tipps für die mobile Website anzeigen .

10

Wenn Sie dem Gerät (z. B. einem Mobiltelefon) einen Buchstaben oder eine Zahl vorschlagen möchten, können Sie <input type="number"> verwenden.

8
Steven

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. Es ist also eine einfache Möglichkeit, den Fehler zu umgehen :)

8
AirWolf

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

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

Nur ein kleiner Nebeneffekt, dass der eingegebene Buchstabe kurzzeitig erscheint und sich STRG/CMD + A ein wenig seltsam verhält.

8
Tarmo

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

Im anderen Fall hilft dies Ihnen:

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)"/>
7
Vaishali Tekale

Nur eine andere Variante mit jQuery 

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

Ein weiteres Beispiel, bei dem Sie nur Zahlen in das Eingabefeld einfügen können, kann keine 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');">
6
Mile Mijatovic
<input name="amount" type="text" value="Only number in here"/> 

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

Sie können den Eingabewert (der standardmäßig als Zeichenfolge behandelt wird) mit der erzwungenen Zahl vergleichen, z. 

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

Sie müssen dies jedoch an ein Ereignis wie keyup etc. binden.

5
cincplug

verwenden Sie einfach type = "number" jetzt unterstützt dieses Attribut die meisten Browser

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

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's ...

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 Attribut onkeydown anstelle von onkeypress verwendet, da das Attribut onkeydown vor dem Attribut onkeypress überprüft wird. Das Problem liegt im Google Chrome-Browser.

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

ASCII-Code für TAB => 9

Das erste Skript enthält weniger Code als das zweite. Das Array mit den Zeichen ASCII 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 um den nächsten Wert 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 bei einer Million 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 => (Zuhause);
  • 35 => (Ende);
4
Daniel

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

Dies ist die erweiterte Version von geowa4s Lösung . Unterstützt min- und max-Attribute. Wenn die Nummer außerhalb des Bereichs liegt, wird der vorherige Wert angezeigt.

Sie können es hier testen.

Verwendung: <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 dies:

$(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'));
            }
    }); 
});
3
user669677

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

Wenn Sie mit der Verwendung von Plugins einverstanden sind, habe ich eines getestet. Es funktioniert gut mit Ausnahme von Paste.

Numerische Eingabe

Hier ist eine Demo http://jsfiddle.net/152sumxu/2

Code unten (Lib in-line eingefügt)

<div id="plugInDemo" class="vMarginLarge">
    <h4>Demo of the plug-in    </h4>
    <div id="demoFields" class="marginSmall">
        <div class="vMarginSmall">
            <div>Any Number</div>
            <div>
                <input type="text" id="anyNumber" />
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    //    Author: Joshua De Leon - File: numericInput.js - Description: Allows only numeric input in an element. - If you happen upon this code, enjoy it, learn from it, and if possible please credit me: www.transtatic.com
    (function(b) {
        var c = { allowFloat: false, allowNegative: false};
        b.fn.numericInput = function(e) {
            var f = b.extend({}, c, e);
            var d = f.allowFloat;
            var g = f.allowNegative;
            this.keypress(function(j) {
                var i = j.which;
                var h = b(this).val();
                if (i>0 && (i<48 || i>57)) {
                    if (d == true && i == 46) {
                        if (g == true && a(this) == 0 && h.charAt(0) == "-") {
                            return false
                        }
                        if (h.match(/[.]/)) {
                            return false
                        }
                    }
                    else {
                        if (g == true && i == 45) {
                            if (h.charAt(0) == "-") {
                                return false
                            }
                            if (a(this) != 0) {
                                return false
                            }
                        }
                        else {
                            if (i == 8) {
                                return true
                            }
                            else {
                                return false
                            }
                        }
                    }
                }
                else {
                    if (i>0 && (i >= 48 && i <= 57)) {
                        if (g == true && h.charAt(0) == "-" && a(this) == 0) {
                            return false
                        }
                    }
                }
            });
            return this
        };
        function a(d) {
            if (d.selectionStart) {
                return d.selectionStart
            }
            else {
                if (document.selection) {
                    d.focus();
                    var f = document.selection.createRange();
                    if (f == null) {
                        return 0
                    }
                    var e = d.createTextRange(), g = e.duplicate();
                    e.moveToBookmark(f.getBookmark());
                    g.setEndPoint("EndToStart", e);
                    return g.text.length
                }
            }
            return 0
        }
    }(jQuery));

    $(function() {
       $("#anyNumber").numericInput({ allowFloat: true, allowNegative: true });
    });
</script>
2
Faiz

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

Ihr HTML-Code:

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

Und das js funktioniert 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"/>


		

2
AleKennedy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Allow Only Numbers
</HEAD>

<BODY>
<script language="JavaScript">
function onlyNumbers(evt)
{
var e = event || evt; // for trans-browser compatibility
var charCode = e.which || e.keyCode;

if (charCode > 31 && (charCode < 48 || charCode > 57))
    return false;

return true;

}
</script>
<input type="text" onkeypress="return onlyNumbers();">
</BODY>
</HTML>
2
aravind3

Ich könnte eine andere (einfache) Problemumgehung dafür haben ...

Da String.fromCharCode (key) seltsame Dinge auf der AZERTY-Tastatur zurückgibt (numerische Tastatur gibt den Code als g für 1 und 1 für das Zeichen & zurück.).

Ich habe festgestellt, dass der endgültige Wert beim Keyup innerhalb der Eingabe auf einen beliebigen Wert zurückgesetzt werden kann. Dies ist eine einfachere, leichtere und fehlerfreiere Methode (dies könnte auch über einen regulären Ausdruck erfolgen ... um Dezimalzahlen zu behalten und so weiter ... don ' t muss andere Ctrl-, Home-, Del- und Enter-Ereignisse filtern ...)

Verwendung mit jq:

<input class='pn'>
<script>
function pn(el){nb=el.value;if(isNaN(nb) || nb<1)el.value=1;}
jQuery('.pn').keyup(function(){pn(this);});
</script>

Onkeyup-Attribut:

<input onkeyup='positiveNumericInput(this)'>
<script>function positiveNumericInput(el){nb=el.value;if(isNaN(nb) || nb<1)el.value=1;}</script>
2
Jack

Benutzen:

<script>
    function onlyNumber(id){ 
        var DataVal = document.getElementById(id).value;
        document.getElementById(id).value = DataVal.replace(/[^0-9]/g,'');
    }
</script>
<input type="text" id="1" name="1" onChange="onlyNumber(this.id);">

Wenn Sie einen Wert nach dem Drücken der Taste aktualisieren möchten, können Sie onChange für onKeypress , onKeyDown oder onKeyup ändern. Das Ereignis onKeypress wird jedoch in keinem Browser ausgeführt.

2

Dies ist die einfache Lösung

Ersetzen Sie .price-input input.quantity durch die Klasse Ihres Eingabefeldes

$(".price-input input.quantity").on("keypress keyup blur",function (event) {    
       $(this).val($(this).val().replace(/[^\d].+/, ""));
        if ((event.which < 48 || event.which > 57)) {
            event.preventDefault();
        }
    });
2

Hier ist eine einfache Lösung, die ich gerne benutze:

function numeric_only (event, input) {
    if ((event.which < 32) || (event.which > 126)) return true; 
    return jQuery.isNumeric ($(input).val () + String.fromCharCode (event.which));
}// numeric_only;

<input type="text" onkeypress="return numeric_only (event, this);" />

Erläuterung:

Verwenden Sie "event.which", um festzustellen, ob es sich um ein druckbares Zeichen handelt. Ist dies nicht der Fall, lassen Sie es zu (für Löschen und Rücktaste). Andernfalls können Sie das Zeichen bis zum Ende der Zeichenfolge zusammenfassen und es mit der jQuery-Funktion "isNumeric" testen. Das bedeutet, dass Sie nicht jedes einzelne Zeichen einzeln testen müssen, sondern auch für Cut/Paste-Szenarien.

Wenn Sie wirklich süß werden möchten, können Sie einen neuen HTML-Eingabetyp erstellen. Nennen wir es "numerisch", damit Sie das Tag haben können:

<input type="numeric" />

was nur numerische Zeichen erlaubt. Fügen Sie einfach den folgenden Befehl "document.ready" hinzu:

$(document).ready (function () {
    $("input[type=numeric]").keypress (function (event) {
        if ((event.which < 32) || (event.which > 126)) return true; 
        return jQuery.isNumeric ($(this).val () + String.fromCharCode (event.which));
    });// numeric.keypress;
});// document.ready;

Dem HTML-Typ ist es egal, welcher Typname Sie verwenden. Wenn er den Namen nicht erkennt, wird standardmäßig ein Textfeld verwendet, sodass Sie dies tun können. Ihr Redakteur kann sich beschweren, aber das ist sein Problem. Zweifellos werden Puritaner ausflippen, aber es funktioniert, ist einfach und bis jetzt ist es ziemlich robust für mich.

2
rexthestrange

Sie können an das Key-Down-Ereignis anschließen und dann die Tasten nach Bedarf filtern.

<input id="FIELD_ID" name="FIELD_ID" onkeypress="return validateNUM(event,this);"  type="text">

Und der eigentliche JavaScript-Handler wäre:

function validateNUM(e,field)
{
    var key = getKeyEvent(e)
    if (specialKey(key)) return true;
    if ((key >= 48 && key <= 57) || (key == 46)){
        if (key != 46)
            return true;
        else{
            if (field.value.search(/\./) == -1 && field.value.length > 0)
                return true;
            else
                return false;
        }
    }

function getKeyEvent(e){
    var keynum
    var keychar
    var numcheck
    if(window.event) // IE
        keynum = e.keyCode
    else if(e.which) // Netscape/Firefox/Opera
        keynum = e.which
    return keynum;
}
2
Alex Shnayder

Geben Sie dem Eingabefeld eine Klasse (<input class="digit" ...>) und verwenden Sie jquery wie folgt.

jQuery(document).ready(function () {
            jQuery('input.digit').live('input keyup',function(e){ jQuery(this).val(jQuery(this).val().replace( /[^\d]/g ,'')); });
});

Mit dem obigen Code werden auch Sonderzeichen in Ctrl+V-Strichen und right click-Strichen deaktiviert.

2
Prasanna Kumar

Erinnern Sie sich an die regionalen Unterschiede (Euros verwenden Perioden und Kommas umgekehrt als Amerikaner), plus das Minuszeichen (oder die Konvention, eine Zahl in Klammern zu kennzeichnen, um negativ zu sein), plus die exponentielle Notation (ich greife dieses an).

2
MusiGenesis

Sie können die Shurok-Funktion ersetzen durch:

$(".numeric").keypress(function() {
    return (/[0123456789,.]/.test(String.fromCharCode(Event.which) ))
});
2
KapitanX

Meine Lösung für ein besseres Benutzererlebnis:

HTML

<input type="tel">

jQuery

$('[type=tel]').on('change', function(e) {
  $(e.target).val($(e.target).val().replace(/[^\d\.]/g, ''))
})
$('[type=tel]').on('keypress', function(e) {
  keys = ['0','1','2','3','4','5','6','7','8','9','.']
  return keys.indexOf(event.key) > -1
})

Einzelheiten:

Vor allem Eingabetypen:

number zeigt Auf-/Abwärtspfeile, die den tatsächlichen Eingabebereich verkleinern. Ich finde sie hässlich und nur nützlich, wenn die Zahl eine Menge darstellt (Dinge wie Telefone, Vorwahlen, IDs ... brauchen sie nicht) tel liefert ähnliche Werte Browservalidierungen der Zahl ohne Pfeile

Die Verwendung von [Nummer/Tel] hilft auch bei der Anzeige der numerischen Tastatur auf mobilen Geräten.

Für die JS-Validierung benötigte ich schließlich zwei Funktionen, eine für die normale Benutzereingabe (Tastendruck) und die andere für eine Kopie + Einfügen-Korrektur (Änderung). Andere Kombinationen würden mir eine schreckliche Benutzererfahrung verschaffen.

Ich benutze zuverlässigerKeyboardEvent.key anstelle von jetzt nicht mehr unterstütztKeyboardEvent.charCode

Abhängig von der Browserunterstützung können Sie die Verwendung von Array.prototype.includes () anstelle des schlecht benannten Array.prototype.indexOf () (für true/false-Ergebnisse) in Betracht ziehen.

2
mencargo

Der folgende Code prüft auch nachPASTEevent.
.Kommentieren Sie "ruleSetArr_4" und fügen Sie "ruleSetArr" hinzu, umFLOATnumbers zuzulassen.
Einfache Copy/Paste-Funktion. Rufen Sie es mit Ihrem Eingabeelement im Parameter auf.
Beispiel: inputIntTypeOnly($('input[name="inputName"]'))

function inputIntTypeOnly(Elm){
    Elm.on("keydown",function(event){
        var e = event || window.event,
            key = e.keyCode || e.which,
            ruleSetArr_1 = [8,9,46], // backspace,tab,delete
            ruleSetArr_2 = [48,49,50,51,52,53,54,55,56,57],	// top keyboard num keys
            ruleSetArr_3 = [96,97,98,99,100,101,102,103,104,105], // side keyboard num keys
            ruleSetArr_4 = [17,67,86],	// Ctrl & V
          //ruleSetArr_5 = [110,189,190], add this to ruleSetArr to allow float values
            ruleSetArr = ruleSetArr_1.concat(ruleSetArr_2,ruleSetArr_3,ruleSetArr_4);	// merge arrays of keys
		
            if(ruleSetArr.indexOf() !== "undefined"){	// check if browser supports indexOf() : IE8 and earlier
                var retRes = ruleSetArr.indexOf(key);
            } else { 
                var retRes = $.inArray(key,ruleSetArr);
            };
            if(retRes == -1){	// if returned key not found in array, return false
                return false;
            } else if(key == 67 || key == 86){	// account for paste events
                event.stopPropagation();
            };

    }).on('paste',function(event){
        var $thisObj = $(this),
            origVal = $thisObj.val(),	// orig value
            newVal = event.originalEvent.clipboardData.getData('Text');	// paste clipboard value
        if(newVal.replace(/\D+/g, '') == ""){	// if paste value is not a number, insert orig value and ret false
            $thisObj.val(origVal);
            return false;
        } else {
            $thisObj.val(newVal.replace(/\D+/g, ''));
            return false;
        };
		
    });
};

var inptElm = $('input[name="inputName"]');

inputIntTypeOnly(inptElm);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="inputName" value="1">

2
crashtestxxx

Ich verwende die Bibliothek jquery.inputmask.js, die Sie von NuGet ..__ herunterladen können. Genauer gesagt verwende ich jquery.inputmask.regex.extensions.js, das dazu gehört.

Ich gebe dem Eingabeelement eine Klasse, in diesem Fall reg:

<input type="number" id="WorkSrqNo" name="WorkSrqNo" maxlength="6" class="reg"/>

Und dann setze ich in JavaScript die Maske:

var regexDigitsOnly = "^[0-9]*$";
$('input.reg').inputmask('Regex', { regex: regexDigitsOnly });

Dies gilt nur für Ziffern, aber Sie können den regulären Ausdruck so ändern, dass "." Akzeptiert wird.

Auf diese Weise können keine Zeichen eingegeben werden, die keine Ziffern sind. Diese Eingabemaskenbibliotheken sind für die allgemeine Formatierung nützlich.

2
arame3333

Ein weiterer einfacher Weg mit jQuery:

$('.Numeric').bind('keydown',function(e){
    if (e.which < 48 || e.which > 57)
        return false;
    return true;
})

Setzen Sie nun einfach jede Eingabeklasse auf Numerisch, wie zum Beispiel:

<input type="text" id="inp2" name="inp2" class='Numeric' />
1
Ali Mahami

Für diejenigen unter Ihnen, die Einzeiler mögen.

string.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d{0,2})(.*)/, '$1');

Ich verwende diesen Code für einen Eingabetyp = "Text" und mit AngularJS zur Aktivierung bei Tastendruck. Sie können jedoch jQuery verwenden, wenn Sie möchten. Fügen Sie diesen Code einfach in eine Funktion ein, die durch Drücken der Taste aktiviert wird.

Es erlaubt nur Ziffern, Ziffern + Dezimal, Ziffern + Dezimal + Ziffern.

CODE

YourString.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d{0,2})(.*)/, '$1');

testOne = "kjlsgjkl983724658.346.326.326..36.346"
=> "983724658.34";

testTwo = ".....346...3246..364.3.64.2346......"
=> "346.";

testThree = "slfdkjghsf)_(*(&^&*%^&%$%$%^KJHKJHKJKJH3"
=> "3";

testFour = "622632463.23464236326324363"
=> "622632463.23";

Dies wurde für US-Währung gebaut, kann aber geändert werden, um mehr als zwei Dezimalstellen hinter der ersten Dezimalstelle zuzulassen, wie in den folgenden ...

GEÄNDERTER CODE

YourString.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d*)(.*)/, '$1');

testFour = "dfskj345346346.36424362jglkjsg....."
=> "345346346.36424362";

:)

1
SoEzPz
function digitsOnly(obj) {
   obj.value = obj.value.replace(/\D/g, "");
}

und im Element

<input type="text" onkeyup="digitsOnly(this);" />
1
kombi

Ja, HTML5 tut es. Versuchen Sie diesen Code ( w3school ):

<!DOCTYPE html>
<html>
<body>

<form action="">
  Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
  <input type="submit" />
</form>

</body>
</html>
1
Gagan Gami

Dies entfernt alle fehlerhaften Zeichen sofort, lässt nur einen Punkt zu, ist kurz und ermöglicht Rückschritt usw.:

$('.numberInput').keyup(function () {
    s=$(this).val();
    if (!/^\d*\.?\d*$/.test(s)) $(this).val(s.substr(0,s.length-1));
});
1
wezten

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

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

Hoffe das hilft.

1
Sicha

Ich habe es ein wenig angepasst, aber es erfordert noch viel mehr Arbeit, um die JavaScript-verrückte Art zu erfüllen.

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 über:

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

Ich hoffe, dass ich hier kein totes Pferd mit einem hässlichen Stock schlagen kann, aber ich verwende dies für die Eingabe der Website-Menge. Es erlaubt nur Zahlen von 1 bis 99.

Probieren Sie es aus: 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>
0
Chris Martin

Reguläre Ausdrücke und die Match-Funktion können in dieser Situation gut funktionieren. Zum Beispiel habe ich Folgendes verwendet, um 4 Eingabefelder zu validieren, die als Koordinaten in einem Diagramm dienten. Es 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();
   }
}
0
user3005331

Sie können versuchen, das Ereignis '' 'onkeydown' '' zu verwenden und das Ereignis (event.preventDefault oder ähnliches) abzubrechen, wenn es nicht einer der zulässigen Schlüssel ist.

0
mbillard

Rufen Sie diese Funktion auf, wenn Sie bereit sind, das zu bestätigen. Ich habe hier eine Textbox 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
    }
}
0
Baladash

Hier ist eine sehr kurze Lösung, die nicht die veralteten keyCode oder which verwendet, keine Nicht-Eingabeschlüssel blockiert und reines Javascript verwendet. (In Chrom 70.0.3533, Firefox 62.0 und Edge 42.17134.1.0 getestet)

HTML:

<input type="text" onkeypress="validate(event)">

JS:

function validate(ev) {
    if (!ev) {
        ev = window.event;
    }

    if (!ev.ctrlKey && ev.key.length === 1 && (isNaN(+ev.key) || ev.key === " ")) {
        return ev.preventDefault();
    }
}
0
Prime_Aqasix

Ich suchte nach einer Möglichkeit, eine Eingabe von Zahlen zu blockieren. Da ich sie in den Antworten nicht fand, funktionierte dieser Code für mich einwandfrei.

Ich muss es nur in das Ereignis onkeypress eingeben.

Wenn Sie nur eine Zahleneingabe blockieren müssen, wird dies meiner Meinung nach gut funktionieren.

onkeypress="if(event.which &lt; 48 || event.which &gt; 57 ) if(event.which != 8) if(e.keyCode != 9) return false;"
0
Edson Cezar

Ich erkenne einen alten Beitrag, aber ich dachte, das könnte jemandem helfen. Vor kurzem musste ich ein Textfeld auf 5 Dezimalstellen beschränken. In meinem Fall ALSO musste die Eingabe des Benutzers weniger als 0,1 betragen

<input type="text" value="" maxlength=7 style="width:50px" id="fmargin" class="formText"  name="textfield" onkeyup="return doCheck('#fmargin',event);">

Hier ist die doCheck-Funktion

function doCheck(id,evt)
{
    var temp=parseFloat($(id).val());

    if (isNaN(temp))
        temp='0.0';
    if (temp==0)
        temp='0.0';

    $(id).val(temp);
}

Hier ist die gleiche Funktion, mit Ausnahme der Ganzzahl-Eingabe

function doCheck(id,evt)
{
    var temp=parseInt($(id).val());

    if (isNaN(temp))
        temp='0';

    $(id).val(temp);
}

hoffe das hilft jemandem

0
ladieu

Ich habe diese Funktion beendet:

onkeypress="if(event.which &lt; 48 || event.which &gt; 57 ) if(event.which != 8) return false;"

Dies funktioniert gut in IE und Chrome, ich weiß nicht, warum es auch in Firefox nicht gut funktioniert. Diese Funktion blockiert die Tabulatortaste in Firefox.

Fügen Sie für die Tabulatortaste in Firefox Folgendes hinzu:

onkeypress="if(event.which &lt; 48 || event.which &gt; 57 ) if(event.which != 8) if(e.keyCode != 9) return false;"
0
Edson Cezar

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

Wenn Sie alles andere als Zahlen, einen Punkt und einen Bindestrich vernachlässigen, scheint dies die perfekte Wahl zu sein, sollten Sie auch erwägen, sie einen beliebigen Inhalt eingeben zu lassen, und wenn sie fertig sind, können Sie die Eingabe reinigen. Wenn keine gültige Zahl, zeigen Sie Fehler an. Diese Methode stellt sicher, dass das Ergebnis immer gültig ist, unabhängig davon, was der Benutzer ausführen kann. Wenn der Benutzer naiv genug ist, um die Warnungen und Fehlermeldungen nicht zu verstehen, wird das Drücken einer Taste und das Erkennen, dass nichts passiert (wie beim Schlüsselcode-Vergleich), ihn nur mehr verwirren.

Bei Formularen sind Validierung und Anzeige von Fehlermeldungen fast eine Notwendigkeit. Die Vorräte könnten also schon da sein. Hier ist der Algorithmus:

  1. Wenn Sie den Fokus verlieren oder das Formular einreichen, führen Sie die folgenden Schritte aus.

    1.1. Lesen Sie den Inhalt aus der Eingabe und wenden Sie parseFloat an

    1.2. Wenn das Ergebnis eine nicht zugängliche Nummer (NaN) ist, setzen Sie das Eingabefeld zurück und rufen Sie eine Fehlermeldung auf: "Geben Sie eine gültige Nummer ein: ZB 235 oder -654 oder 321.526 oder - 6352.646584 ".

    1.3. Andernfalls, wenn String (Ergebnis)! == (Inhalt von Eingabe) den Wert des Felds in Ergebnis ändern und Warnmeldung anzeigen: "Der von Ihnen eingegebene Wert Wurde geändert. Die Eingabe muss eine gültige Zahl sein zB 235 oder -654 oder 321.526 oder -6352.646584 ". Für ein Feld, das keinen unbestätigten Wert zulässt, kann diese Bedingung zu Schritt 1.2 hinzugefügt werden.

    1.4. Sonst nichts tun.

Diese Methode bietet Ihnen außerdem den zusätzlichen Vorteil, dass Sie ggf. Validierungen basierend auf Minimalwert, Maximalwert, Dezimalstellen usw. durchführen. Müssen Sie diese Operationen nur nach Schritt 1.2 am Ergebnis durchführen.

Nachteile:

  1. Die Eingabe ermöglicht es dem Benutzer, einen beliebigen Wert einzugeben, bis der Fokus verloren geht oder das Formular gesendet wird. Wenn jedoch die Anweisungen zum Ausfüllen des Feldes klar genug sind, könnte dies in 90% der Fälle nicht der Fall sein.

  2. Wenn in Schritt 1.3 eine Warnung angezeigt wird, kann dies vom Benutzer übersehen werden und möglicherweise zu einer unbeabsichtigten Eingabe führen. Wenn Sie einen Fehler ausgeben oder die Warnung richtig anzeigen, kann dies behoben werden.

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

Vorteile: Angenommen, der Benutzer hat Grundkenntnisse zum Lesen und Verstehen,

  1. Sehr anpassbar mit Optionen.

  2. Funktioniert browserübergreifend und unabhängig von der Sprache.

  3. Verwendet bereits verfügbare Funktionen in einem Formular, um Fehler und Warnungen anzuzeigen.

0
BlackPanther

das funktioniert auch bei persischer und arabischer Nummer :)

 setNumericInput: function (event) {
          var key = window.event ? event.keyCode : event.which
          if (event.keyCode === 8 ||
        (key >= 48 && key <= 57) ||
        (key >= 1776 && key <= 1785)) {
            return true
          } else {
            event.preventDefault()
          }
        }
0
hamid keyhani