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

Dies funktioniert auch für persische und arabische Zahlen :)

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

Answer 2

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

Answer 3

Sie können die Funktion Shurok durch ersetzen:

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

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

Der folgende Code prüft auch auf EINFÜGEN Veranstaltung.
Unkommentiert " ruleSetArr_4 " und add(concate) zu " ruleSetArr " zu ermöglichen FLOAT Zahlen.
Einfache Kopieren/Einfügen-Funktion. Rufen Sie sie mit Ihrem Eingabeelement als 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">