Untitled

<html>
    <head>
        <style>
            html {
                box-sizing: border-box;
            }

            *, *:before, *:after {
                box-sizing: inherit;
            }
            body {
                background: #f5f5f5;
                color: #333;
                font-family: arial, helvetica, sans-serif;
                font-size: 32px;
            }
            h1 {
                font-size: 32px;
                text-align: center;
            }
            p {
                font-size: 20px;
                line-height: 1.5;
                margin: 40px auto 0;
                max-width: 640px;
            }
            pre {
                background: #eee;
                border: 1px solid #ccc;
                font-size: 16px;
                padding: 20px;
            }
            form {
                margin: 40px auto 0;
            }
            label {
                display: block;
                font-size: 24px;
                font-weight: bold;
                margin-bottom: 10px;
            }
            input {
                border: 0;
                color: #333;
                font-size: 32px;
                margin: 0 0 20px;
                padding: .5rem 1rem;
                text-align: right;
                margin-top: 1px;
            }
            input:active,
            input:focus {
                border:0;
                outline:none;
            }
            .input {
                -moz-appearance: textfield;
                -webkit-appearance: textfield;
                background-color: white;
                background-color: -moz-field;
                border: 1px solid darkgray;
                box-shadow: 1px 1px 1px 0 lightgray inset;
                height: 58px;
            }
            button {
                background: #fff;
                border: 2px solid #333;
                border-radius: 5px;
                color: #333;
                font-size: 16px;
                font-weight: bold;
                padding: 1rem;
            }
            button:hover {
                background: #333;
                border: 2px solid #333;
                color: #fff;
            }
            .main {
                background: #fff;
                border: 5px solid #ccc;
                border-radius: 10px;
                margin: 40px auto;
                padding: 40px;
                width: 80%;
                max-width: 700px;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <h1>Auto Formatting Currency</h1>
            <form id="form1" method="get" action="#" novalidate>
                <label for="currency-field">Enter Amount</label>
                <div class="input">
                    <input type="text" name="currency-field-number" autocomplete="off" inputmode="numeric" pattern="[0-9]*" value="" data-type="currency" placeholder="1.000.000">,
                    <input type="text" name="currency-field-decimal" autocomplete="off" maxlength="2" inputmode="numeric" pattern="[0-9]*" size="1" value="" placeholder="00">
                </div><br/><br/>
                <button type="submit">Show me the money</button>
            </form>
        </div>
        <script>
            // Check for validate
            var form1 = document.querySelector("#form1");

            form1.addEventListener("submit", function(e){
                e.preventDefault();    // stop form from submitting, demo only
                alert(this.querySelector("input[name='currency-field-number']").value + ',' + this.querySelector("input[name='currency-field-decimal']").value);
            });

            form1.querySelector("input[name='currency-field-number']").addEventListener("keydown", function(event) {
                const acceptedKeys = [8, 9, 13, 35, 36, 37, 38, 39, 40, 46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 188, 190];
                if (acceptedKeys.indexOf(event.keyCode) == -1) {
                    event.preventDefault();
                    return false;
                }
                if (event.keyCode == 188 || event.keyCode == 13 || event.keyCode == 9) { // comma or enter or tab
                    form1.querySelector("input[name='currency-field-decimal']").focus();
                    event.preventDefault();
                    return false;
                }
                formatCurrency(this, false);
                return true;
            });

            form1.querySelector("input[name='currency-field-decimal']").addEventListener("keyup", function(event) {
                const acceptedKeys = [8, 9, 35, 36, 37, 38, 39, 40, 46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57];
                if (acceptedKeys.indexOf(event.keyCode) == -1) {
                    event.preventDefault();
                    return false;
                }
                if (event.keyCode == 8 && this.value.length == 0) {
                    form1.querySelector("input[name='currency-field-number']").focus();
                }
            });

            function formatNumber(n) {
                // format number 1000000 to 1.234.567
                return n.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ".");
            }

            function formatCurrency(input, blur) {
                // get input value
                var input_val = input.value;

                // don't validate empty input
                if (input_val === "") { return; }

                // original length
                var original_len = input_val.length;

                // initial caret position
                var caret_pos = input.selectionStart;

                // check for decimal
                if (input_val.indexOf(",") >= 0) {
                    // get position of first decimal
                    // this prevents multiple decimals from
                    // being entered
                    var decimal_pos = input_val.indexOf(",");

                    // split number by decimal point
                    var left_side = input_val.substring(0, decimal_pos);
                    var right_side = input_val.substring(decimal_pos);

                    // add commas to left side of number
                    left_side = formatNumber(left_side);

                    // validate right side
                    right_side = formatNumber(right_side);

                    // On blur make sure 2 numbers after decimal
                    if (blur) {
                        right_side += "00";
                    }

                    // Limit decimal to only 2 digits
                    right_side = right_side.substring(0, 2);

                    // join number by .
                    input_val = left_side + "," + right_side;
                } else {
                    // no decimal entered
                    // add commas to number
                    // remove all non-digits
                    input_val = formatNumber(input_val);

                    // final formatting
                    if (blur) {
                        input_val += ",00";
                    }
                }

                // send updated string to input
                input.value = input_val;

                // put caret back in the right position
                var updated_len = input_val.length;
                caret_pos = updated_len - original_len + caret_pos;
                input.setSelectionRange(caret_pos, caret_pos);
            }
        </script>
    </body>
</html>