Блог

Главная - Вопросы по программированию - Используйте библиотеку maskmoney для ввода

Используйте библиотеку maskmoney для ввода

#javascript #html

Вопрос:

У меня есть следующая форма, в которой я автоматически добавляю входные данные с помощью функции в 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">€</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>

Проблема в том , что при использовании этой строки внутри функции в js $('#sub').focus(); всякий раз, когда я хочу нажать на следующий ввод, я должен дважды щелкнуть на том же вводе, чтобы иметь возможность записывать на этот ввод. Следует принимать входные данные всего одним щелчком мыши

Комментарии:

1. Можете ли вы прояснить проблему? Почему вы фокусируете этот элемент, если не хотите, чтобы этот элемент был сфокусирован? Почему бы просто не удалить ту единственную «проблемную линию», которую вы определили, если вы не хотите, чтобы это произошло?

2. @David Я фокусируюсь на элементе, потому что хочу, чтобы у элемента всегда был символ евро, и если я не сфокусируюсь, этого не произойдет.

Ответ №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">€</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>
Метки: