Como formatar moeda reais a partir de input de dados?

[Irair Valesan]

Olá, 

tenho um script para formatar input número para moeda em reais editado por ponto e virgual conforme os números forem sendo digitados. Ele funciona bem até o valor 9.999.999,99 a partir dai ele se perde na pontuação, No script representado abaixo entendo que o problema esta na linha do if (valor.length > 12 && valor.length <= 18 ) {

Poderiam  me ajudar

<div class="list-group" style="margin-top: 1%;">

<?php

    echo form_label("Valor Contrato R$:", "valor", array("style" => "height:22px;padding-top:5px;"));
    echo form_input(array(
        "name" => "valor",
        "type" => "text",
        "id" => "valor",
        "style" => "width:30%;height:22px;",
        "maxlength" => "18",
        "onkeyup" => "formatarMoeda()",
        "value" => $tarifasBancarias['valor_tarifa']
    ));

?>

</div>

<script>
function formatarMoeda() {
    var elemento = document.getElementById('valor');
    var valor = elemento.value;
    console.log(valor.length);

    valor = valor + '';
    valor = parseInt(valor.replace(/[\D]+/g, ''));
    valor = valor + '';
    valor = valor.replace(/([0-9]{2})$/g, ',$1');

    if (valor.length > 6 && valor.length <= 10) {
        valor = valor.replace(/([0-9]{3}),([0-9]{2}$)/g, '.$1,$2');
    }
    if (valor.length > 10 && valor.length <= 12) {
        valor = valor.replace(/([0-9]{3})\.([0-9]{3}),([0-9]{2}$)/g, '.$1.$2,$3');
        console.log(valor);
    }
    if (valor.length > 12 && valor.length <= 18) {
        valor = valor.replace(/([0-9]{3}).([0-9]{3}).([0-9]{3}),([0-9]{2}$)/g, ".$1.$2.$3,$4");
    }

    elemento.value = valor;
    if (valor == 'NaN') elemento.value = '';
}
</script>

 

[frankhosaka]

Arquivo index.php
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" 
    rel="stylesheet">
<script>  
    function formatarMoeda(event) {
            let campo = event.target;
            let valor = campo.value;

            // Remove tudo que não é número
            valor = valor.replace(/\D/g, "");

            // Remove zeros à esquerda
            valor = valor.replace(/^0+/, "");

            // Adiciona os zeros necessários para garantir que há sempre dois dígitos após a vírgula
            while (valor.length < 3) {
                valor = '0' + valor;
            }

            // Adiciona o separador de decimal
            valor = valor.slice(0, valor.length - 2) + ',' + valor.slice(valor.length - 2);

            // Adiciona o separador de milhar
            valor = valor.replace(/\B(?=(\d{3})+(?!\d))/g, ".");

            // Adiciona o símbolo de Real no início
            campo.value = `R$ ${valor}`;
    }
</script>
<div class="container list-group" style="margin-top: 1%;">

<?php
function form_label($label,$valor,$style){
    ?>
    <label for=<?=$valor?> style=<?=$style['style']?> class=form-label><?=$label?></label>
    <?php
}
function form_input($d){
    ?>
    <input type="<?=$d['type']?>" name="<?=$d['name']?>" id="<?$d['id']?>"
        style="<?=$d['style']?>" maxlength=<?=$d['maxlength']?>
        onkeyup="<?=$d['onkeyup']?>" class=form-control
        autofocus>
    <?php
}
echo form_label("Valor Contrato R$:","valor",array("style" => "height:22px;padding-top:5px;"));
echo form_input(array(
    "name" => "valor",
    "type" => "text",
    "id" => "valor",
    "style" => "width:30%;height:22px;",
    "maxlength" => "18",
    "onkeyup" => "formatarMoeda(event)",
    ));
?>
</div>

 

[Irair Valesan]

Bom dia.

Fiz os testes aqui e atendeu bem, funcionou. Ficou um detalhe se é possível encaixar ai é que ele não respeita o length. O número digitado é infinito. 

 

[frankhosaka]

Quem controla o número de dígitos nesse código é o último comando, onde é definido maxlength, atualmente com 18 dígitos. Altere até chegar nos dígitos desejados.

[Irair Valesan]

Perfeito. Obrigado

 

[Irair Valesan]

O que precisa ser feito para este script aceitar valores negativos?

[frankhosaka]

14 horas atrás, Irair Valesan disse:

O que precisa ser feito para este script aceitar valores negativos?

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script>
    function formatarMoeda(event) {
        let campo = event.target;
        let valor = campo.value;

        // Remove tudo que não é número, exceto o sinal de menos (-)
        valor = valor.replace(/[^0-9-]/g, "");

        // Verifica se o valor é negativo
        let isNegative = false;
        if (valor.indexOf('-') === 0) {
            isNegative = true;
            valor = valor.substring(1);
        }

        // Remove zeros à esquerda
        valor = valor.replace(/^0+/, "");

        // Adiciona os zeros necessários para garantir que há sempre dois dígitos após a vírgula
        while (valor.length < 3) {
            valor = '0' + valor;
        }

        // Adiciona o separador de decimal
        valor = valor.slice(0, valor.length - 2) + ',' + valor.slice(valor.length - 2);

        // Adiciona o separador de milhar
        valor = valor.replace(/\B(?=(\d{3})+(?!\d))/g, ".");

        // Adiciona o sinal de negativo de volta se necessário
        if (isNegative) {
            valor = '-' + valor;
        }

        // Adiciona o símbolo de Real no início
        campo.value = `R$ ${valor}`;
    }
</script>
<div class="container list-group" style="margin-top: 1%;">
    <?php
    function form_label($label, $valor, $style) {
        ?>
        <label for=<?=$valor?> style=<?=$style['style']?> class=form-label><?=$label?></label>
        <?php
    }
    function form_input($d) {
        ?>
        <input type="<?=$d['type']?>" name="<?=$d['name']?>" id="<?=$d['id']?>"
            style="<?=$d['style']?>" maxlength=<?=$d['maxlength']?>
            onkeyup="<?=$d['onkeyup']?>" class=form-control
            autofocus>
        <?php
    }
    echo form_label("Valor Contrato R$:", "valor", array("style" => "height:22px;padding-top:5px;"));
    echo form_input(array(
        "name" => "valor",
        "type" => "text",
        "id" => "valor",
        "style" => "width:30%;height:22px;",
        "maxlength" => "18",
        "onkeyup" => "formatarMoeda(event)",
    ));
    ?>
</div>