directory : /web/dhtml/ : numeric-input.html

Directory path . web , dhtml .
HTML Document File : numeric-input.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>number input</title>
</head>

<body>

    <a
        href="https://www.w3schools.com/tags/att_input_type_number.asp">https://www.w3schools.com/tags/att_input_type_number.asp</a>

    <hr>

    <input oninput="integer_input(this)" placeholder="integer_input">
    <script>
        function integer_input(target) {
            var parsed = parseInt(target.value)
            // also parseFloat
            if (!isNaN(parsed)) {
                if (typeof parsed == "number")
                    target.value = parsed
            } else target.value = ""
        } // function
    </script>

    <hr>

    <input oninput="decimal_input(this)" placeholder="decimal_input">
    <script>
        function decimal_input(target) {
            var input = target.value
            // only last is dot (allowed)
            var end_dot = input.indexOf(".") == (input.length - 1) || ("0" == input[input.length - 1])
            var parsed = parseFloat(input)
            // also parseInt
            if (!isNaN(parsed)) {
                if (typeof parsed == "number")
                    if (!end_dot) target.value = parsed
            } else {
                if (!end_dot) target.value = ""
            }
        } // function
    </script>

    <hr>

    <input class="cents_input" value="" oninput="cents_input(this, false)" placeholder="cents_input">
    <script>

        setInterval(init_cents_input, 500)

        function cents_input(target, fixed = true) {
            var input = target.value
            // only last is dot (allowed)
            var end_dot = (input.indexOf(".") == (input.length - 1) && !fixed) || ("0" == input[input.length - 1] && !fixed)
            var parsed = parseFloat(input)
            parsed = Math.abs(parsed) // non-negative number (optional)
            // also parseInt
            if (!isNaN(parsed)) {
                if (typeof parsed == "number")
                    if (!end_dot) {
                        if (fixed) parsed = parsed.toFixed(2) // 2 fixed decimals (configurable)
                        target.value = parsed
                    }
            } else {
                if (!end_dot) target.value = ""
            }
            // time elapsed
            target.dataset.inputTime = Date.now()

        } // function

        function init_cents_input() {
            for (var cent_input of document.querySelectorAll(".cents_input")) {
                if (typeof cent_input.dataset.inputTime == "undefined" ||
                    (typeof cent_input.dataset.inputTime != "undefined" &&
                        ((Date.now() - parseInt(cent_input.dataset.inputTime)) >= (4 * 1000))
                    )
                )
                    cents_input(cent_input)
            }
        } // function

    </script>

    <hr>

    <div><a href="."> go to main page. </a></div>

    <hr>
    
    <script src="/web/show-source.js" data-href="?show-source"></script>
</body>

</html>