JSFiddle - React, Tailwind, and code Playground

by Igwe Kalu

HTML

<input type="text" class="pack" name="pack01" id="pack01" autocomplete="off" maxlength="2" value="0" onKeyPress="validate_numeric(event)" />
<input type="text" class="pack" name="pack02" id="pack02" autocomplete="off" maxlength="2" value="0" onKeyPress="validate_numeric(event)" />

JavaScript

function validate_numeric(evt) {
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode(key);
    var regex = /^[0-9\b]|\./;
    if (!regex.test(key)) {
        theEvent.returnValue = false;
        if (theEvent.preventDefault) theEvent.preventDefault();
    }
}

$("input").on("blur", function () {
    if (!this.value) {
        this.value = "0";
    }
});