Use maskmoney library on inputs

Question

I have the following form where I add the inputs automatically with a function in js like this:

$('.Preco1').maskMoney({ decimal: '.', thousands: ' ', precision: 2 });
$('.Preco1').focus();

$('#sub').maskMoney({ decimal: '.', thousands: ' ', precision: 2, suffix: ' € ' });

$(".soma4, .soma5, .soma20").blur(function(){

    var total1 = 0;
    var total = 0;
    var total2 = 0;
    var selector = $(this)
     selector.closest(".test").find(".soma4").each(function(){
        total1 = total1 + Number($(this).val().replace(/\s/g, ''));  
    });
     selector.closest(".test").find(".soma5").each(function(){
        total = total + Number($(this).val().replace(/\s/g, ''));  
    });
    selector.closest(".test").find(".soma20").each(function(){
        total2 = total2 + Number($(this).val().replace(/\s/g, ''));  
    });

    total3 = total * total1;
    total4 = total2 / 100;
    total5 = total3 * total4;
    total6 = total3 - total5;
    selector.closest(".test").find(".sub3").val(total6.toFixed(2));
    
    var total3 = 0;

    $(".soma").each(function(){
        total3 = total3 + Number($(this).val().replace(/\s/g, ''));  
    });
    
    $("#sub").val(total3.toFixed(2));
      $('#sub').focus();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>

<form role="form" class="limp5">
<div class="test">
  <div class="form-group col-md-1"> 
    <input type="text" class="form-control1 Preco1 alinha soma4" name="Qttd" id="Qttd" required>
    <span class="form-highlight"></span>
    <span class="form-bar"></span>
    <label class="label3" for="Qttd">Quantidade</label>       
  </div>
  <div class="form-group col-md-1" style="width: 11.099999995%; flex: 0 0 11.099%;max-width: 11.099%;">
    <input type="text" class="form-control1 Preco1 alinha soma5" name="Uniit" id="Uniit" required>
    <span class="form-highlight">€</span>
    <span class="form-bar"></span>
    <label class="label3" for="Uniit">Preço Unitário</label>  </div>
  <div class="form-group col-md-1">
    <input type="text" class="form-control1 soma alinha sub3" name="Vallor" id="Vallor" required>
    <span class="form-highlight">€</span>
    <span class="form-bar"></span>
    <label class="label3" for="Vallor">Total</label>        
  </div>
</div>
<div class="row fixarfundo">
  <div class="form-group col-md-12" >                       
    <input type="text" class="form-control alinha" name="sub" id="sub">
    <span class="form-highlight"></span>                        
    <span class="form-bar"></span>                      
    <label class="label3" for="sub">Total</label>        
  </div>
</div>
</form>

The problem is that when using this line inside the function in js $('#sub').focus();, whenever I want to click on the next input I have to double click on the same input to be able to write to that input. Should take the input with just one click

Answer 1

You don't need to focus it to get the euro symbol. Just set symbolStay to true. Then set the value like this:

   $('#sub').maskMoney({ symbolStay: true, decimal: '.', thousands: ' ', precision: 2, suffix: ' € ' });
   $("#sub").maskMoney('mask', value * 100);

(I don't know why you have to multiply it by 100, but you do)

Check this out:

$('.Preco1').maskMoney({ decimal: '.', thousands: ' ', precision: 2 });
$('.Preco1').focus();

$('#sub').maskMoney({ symbolStay: true, decimal: '.', thousands: ' ', precision: 2, suffix: ' € ' });

$(".soma4, .soma5, .soma20").blur(function(){

    var total1 = 0;
    var total = 0;
    var total2 = 0;
    var selector = $(this)
     selector.closest(".test").find(".soma4").each(function(){
        total1 = total1 + Number($(this).val().replace(/\s/g, ''));  
    });
     selector.closest(".test").find(".soma5").each(function(){
        total = total + Number($(this).val().replace(/\s/g, ''));  
    });
    selector.closest(".test").find(".soma20").each(function(){
        total2 = total2 + Number($(this).val().replace(/\s/g, ''));  
    });

    total3 = total * total1;
    total4 = total2 / 100;
    total5 = total3 * total4;
    total6 = total3 - total5;
    selector.closest(".test").find(".sub3").val(total6.toFixed(2));
    
    var total3 = 0;

    $(".soma").each(function(){
        total3 = total3 + Number($(this).val().replace(/\s/g, ''));  
    });
    
    $("#sub").maskMoney('mask',total6 * 100);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>

<form role="form" class="limp5">
<div class="test">
  <div class="form-group col-md-1"> 
    <input type="text" class="form-control1 Preco1 alinha soma4" name="Qttd" id="Qttd" required>
    <span class="form-highlight"></span>
    <span class="form-bar"></span>
    <label class="label3" for="Qttd">Quantidade</label>       
  </div>
  <div class="form-group col-md-1" style="width: 11.099999995%; flex: 0 0 11.099%;max-width: 11.099%;">
    <input type="text" class="form-control1 Preco1 alinha soma5" name="Uniit" id="Uniit" required>
    <span class="form-highlight">€</span>
    <span class="form-bar"></span>
    <label class="label3" for="Uniit">Preço Unitário</label>  </div>
  <div class="form-group col-md-1">
    <input type="text" class="form-control1 soma alinha sub3" name="Vallor" id="Vallor" required>
    <span class="form-highlight">€</span>
    <span class="form-bar"></span>
    <label class="label3" for="Vallor">Total</label>        
  </div>
</div>
<div class="row fixarfundo">
  <div class="form-group col-md-12" >                       
    <input type="text" class="form-control alinha" name="sub" id="sub">
    <span class="form-highlight"></span>                        
    <span class="form-bar"></span>                      
    <label class="label3" for="sub">Total</label>        
  </div>
</div>
</form>