javascript - 在输入上使用 maskmoney 库

Question

我有以下表格，在其中我使用 js 中的函数自动添加输入，如下所示：

$('.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">€&lt;/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">€&lt;/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>

问题是，当在 js 的函数中使用这一行时$('#sub').focus();，每当我想点击下一个输入时，我必须双击相同的输入才能写入该输入。应该一键输入

标签： javascripthtml

Answer 1

您无需集中注意力即可获得欧元符号。刚设置symbolStay为true。然后像这样设置值：

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

（我不知道为什么你必须将它乘以 100，但你确实这样做了）

看一下这个：

$('.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">€&lt;/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">€&lt;/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>