JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<input type='text' data-format='float'>
<input type='text' data-format='currency'>

CSS

input{
    display: block;
    margin-bottom: 3px;
}

JavaScript

/** ready to rumble */
$(document).ready(function(){
    /** Formatierungsfunktionen definieren */
    var formatter = {
        'float': function(str){
            str = str.replace(/[^0-9\.]+/g, '');
            return parseFloat(str) || 0;
        },
        'currency': function(str){
            fl = formatter['float'](str);
            return fl.toFixed(2) + ' €';
        },
        'skel': function(str){
            // ...
            return str;
        }
    };

    /** Formatierung im jQuery-Object-Context durchführen */
    function jFormat(){
        var format = this.attr('data-format');
        if(typeof formatter[format] !== 'undefined'){
            this.val(formatter[format](this.val()));
        }
    }
    
    /** Initialisierung und Event-Binding */
    $('[data-format]').each(function(){
        var $t = $(this);
        jFormat.apply($t);
        $t.on('change', function(){
            jFormat.apply($t);
        });
    });
});