JSFiddle - React, Tailwind, and code Playground

by dcardoso

HTML

<div data-role="page">
    <div data-role="header">Testeaklsd </div>
    <div data-role="content">
<input type="text" id="montanteTransferenciaMeuBancoText" name="montante" class="required amount" maxlength="18" inputmode="latin digits" />
        <div id="teste"></div>
    </div>
</div>

JavaScript

$( '#amount' ).keyup( function() {
    formatAmount( $( this ).val() );
});

function formatAmount( number ) {

    // remove all the characters except the numeric values
    number = number.replace( /[^0-9]/g, '' );

    // set the default value
    if( number.length == 0 ) number = "0.00";
    else if( number.length == 1 ) number = "0.0" + number;
    else if( number.length == 2 ) number = "0." + number;
    else number = number.substring( 0, number.length - 2 ) + '.' + number.substring( number.length - 2, number.length );

    // set the precision
    number = new Number( number );
    number = number.toFixed( 2 );    // only works with the "."

    // change the splitter to ","
    number = number.replace( /\./g, ',' );

    // format the amount
    x = number.split( ',' );
    x1 = x[0];
    x2 = x.length > 1 ? ',' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while( rgx.test( x1 ) ) {
        x1 = x1.replace( rgx, '$1' + '.' + '$2' );
    }

    $( '#teste' ).html( x1 + x2 + "<br />" );
    
    return x1 + x2;
}