JSFiddle - React, Tailwind, and code Playground

by vrcca

HTML

<input class="currency-mask" type="text" />
<span id="resultado" />

JavaScript

$(function() {

    var NUM_CASAS_DECIMAIS = 5;
    var KEY_VIRGULA = 44;
    var KEY_BACKSPACE = 8;
    var KEY_CONTROLS = 0;
    var KEY_NEGATIVE = 45;
    
    var ENABLED_KEYS = [KEY_NEGATIVE, KEY_CONTROLS, KEY_BACKSPACE, KEY_VIRGULA, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57];
    
    $("input.currency-mask").on('keypress', function(event) {
        var key = event.which;  
            
        if (ENABLED_KEYS.indexOf(key) < 0) {
            event.preventDefault();
        }
        
        var value = $(this).val();
        var indexDecimalSeparator = value.indexOf(String.fromCharCode(KEY_VIRGULA));
        var contemSeparador = indexDecimalSeparator > -1;
        if (key === KEY_VIRGULA) {
            if (contemSeparador || value.length < 1) {
                event.preventDefault();
            }
        }
        
        $("#resultado").append("["+key + "] ");
        
        var decimais = value.substring(indexDecimalSeparator + 1); 
        if (contemSeparador && decimais.length >= NUM_CASAS_DECIMAIS && (KEY_BACKSPACE !== key && KEY_CONTROLS !== key)) {
            event.preventDefault();
        }
    });
    
    
    // ---------------
    // BLUR
    // ---------------
    
    $("input.currency-mask").on('blur', function() {
        var value = $(this).val();
        
        var indexDecimalSeparator = value.indexOf(String.fromCharCode(KEY_VIRGULA));
        if (indexDecimalSeparator === value.length - 1) {
            $(this).val(value + "0");
        }
        
        var totalDecimais = value.substring(indexDecimalSeparator + 1); 
        
        $("#resultado").append(totalDecimais + " ");
    
    });
})();