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

Verwenden Sie dieses DOM:

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

Und dieses Drehbuch:

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, weil das Attribut onkeydown vor dem Attribut onkeypress geprüft wird. Das Problem würde im Google Chrome-Browser auftreten.

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

ASCII-Code für TAB => 9

Das erste Skript hat weniger Code als das zweite, aber das Array der ASCII-Zeichen muss 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 in jeder Position des Arrays gibt an, wie oft die jeweilige Position gelesen wird. Bei jedem Auslesen wird die nächste Ziffer um 1 erhöht. Zum Beispiel:

NCount = 0

48 + NCount = 48

NCount + +

48 + NCount = 49

NCount + +

...

48 + NCount = 57

Im Falle der numerischen Schlüssel sind nur 10 (0 - 9), aber wenn sie 1 Million wären, würde es keinen Sinn machen, ein Array mit all diesen Schlüsseln zu erstellen.

ASCII-Codes:

• 8 ==> (Rücktaste);
• 46 => (Löschen);
• 37 => (Pfeil nach links);
• 39 => (Pfeil nach rechts);
• 48 - 57 => (Zahlen);
• 36 => (Heimat);
• 35 => (Ende);

Answer 2

Dies ist die erweiterte Fassung von geowa4's Lösung . Unterstützt min y max Eigenschaften. Wenn die Zahl 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'));
            }
    }); 
});

Answer 3

Die beste Methode (die ALLE Arten von Zahlen zulässt - reelle negative, reelle positive, ganzzahlige negative und ganzzahlige positive) 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();
    };
});

Answer 4

Verwendung:

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

Und wenn Sie einen Wert nach dem Drücken einer Taste aktualisieren möchten, können Sie die onChange para onKeypress , onKeyDown o onKeyup . Das Ereignis onKeypress wird jedoch in keinem Browser ausgeführt.

Answer 5

Hier ist eine schöne einfache Lösung, die ich gerne verwende:

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:

Mit "event.which" - zuerst feststellen, ob es ein druckbares Zeichen ist. Ist dies nicht der Fall, dann lassen Sie es zu (für Dinge wie Löschen und Rücktaste). Andernfalls wird das Zeichen an das Ende der Zeichenfolge angehängt und mit der jQuery-Funktion "isNumeric" getestet. Dies nimmt alle der Müdigkeit weg von der Prüfung jedes einzelnen Zeichens und funktioniert auch für Cut / Paste Szenarien.

Wenn Sie es ganz genau nehmen wollen, können Sie einen neuen HTML-Eingabetyp erstellen. Nennen wir ihn "numerisch", damit Sie den Tag haben können:

<input type="numeric" />

die nur numerische Zeichen zulässt. Fügen Sie einfach den folgenden "document.ready"-Befehl 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;

HTML ist es egal, welchen Namen Sie verwenden - wenn es diesen nicht erkennt, wird standardmäßig ein Textfeld verwendet, so dass Sie dies tun können. Ihr Editor wird sich vielleicht beschweren, aber das ist ja sein Problem. Zweifellos werden Puritaner ausflippen, aber es funktioniert, ist einfach und hat sich bei mir bisher als ziemlich robust erwiesen.

UPDATE

Hier ist ein besserer Weg: Er berücksichtigt die Textauswahl und verwendet natives Javascript:

verify (event) {
    let value = event.target.value;
    let new_value = `${value.substring (0, event.target.selectionStart)}${event.key}${value.substring (event.target.selectionEnd)}`;
    if ((event.code < 32) || (event.code > 126)) return true;
    if (isNaN (parseInt (new_value))) return false;
    return true;
}// verify;