Как я могу умножить поля, содержащие как натуральные значения, так и валюту? - PullRequest
Новая
       23

Как я могу умножить поля, содержащие как натуральные значения, так и валюту?

4 голосов
/ 24 февраля 2020

Я пытаюсь скопировать калькулятор из электронной таблицы Excel на веб-страницу. Первое поле - это ввод натуральных чисел (без запятых), второе - для некоторых валютных значений (с запятыми, точками и т. Д. c), а третье - итоговое значение, но оно имеет определенное значение (например, 0 38 центов). Оба поля должны умножиться и дать результат в третьем поле.

Я пытался создать маску с помощью плагина маски, но у меня было несколько ошибок. Я тоже пытался использовать toLocaleStrings.

У меня проблемы с масками и результатами. Это ожидаемый результат: capture

HTML

<form>
<!-- simple number to start the calculation -->
<label>Natural Number</label>
<input type="text" id="base" />
<br>
<!-- currency including the cents -->
<label>Currency value</label>
<input type="text" id="ticket" />
<br>
<!-- If the first field is "1" and the second is "1,00", this field has a value of 0.38 cents. -->
<label>Currency total</label>
<input type="text" id="cost" readonly /></form>

JQUERY

$(document).ready(function(){
$('#cost').mask('000.000.000.000.000,00', {reverse: true});

$('#base').keyup(calculate);
$('#ticket').keyup(calculate)

function calculate(e) {
$('#cost').val($('#base').val() * $('#ticket').val() * 0.38).trigger('input')
}

});

Ответы [ 3 ]

0 голосов
/ 25 февраля 2020

Это функционально здесь без каких-либо плагинов. Что-то, что вы можете настроить, чтобы соответствовать вашему реальному проекту. Надеемся, что следующие стандарты HTML наконец приведут к встроенной локализации в полях ввода.

[ОБНОВЛЕНИЕ] Использование менее задержанного Onchange вместо обработчиков событий keyup позволит упростить ввод и станет более удобным для пользователя. И позволял печатать, используя запятую, которая будет заменена на ожидаемую точку по умолчанию, чтобы функция parseFloat воспринимала это как допустимое число. Таким образом, мы могли бы использовать шаблон регулярного выражения для форматирования значения валюты. 

$(document).ready(function(){

$('form').on('change','#base,#ticket',function() {
  var ticket=parseFloat($('#ticket').val().replace(',', '.'));
  calculate();
  if(!isNaN(ticket)){
  $('#ticket').val(EuroFormat(ticket));
  }
  });

function calculate(e) {
var ticket=parseFloat($('#ticket').val().replace(',', '.'));
var total = parseFloat($('#base').val()) * ticket * 0.38;
if(!isNaN(total)){
$("#cost").val(EuroFormat(total));
}

}

function EuroFormat(num) {
  return (  num.toFixed(2).replace('.', ',').replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') + ' €'  ) 
} 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<!-- simple number to start the calculation -->
<label>Natural Number</label>
<input type="text" id="base" autocomplete="off"/>
<br>
<!-- currency including the cents -->
<label>Currency value</label>
<input type="text" id="ticket" autocomplete="off"/>
<br>
<!-- If the first field is "1" and the second is "1,00", this field has a value of 0.38 cents. -->
<label>Currency total</label>
<input type="text" id="cost" readonly"/></form>
0 голосов
/ 25 февраля 2020

Вы можете использовать Number.toLocaleString('en-us',{minimumFractionDigits:2,maximumFractionDigits:2})+'€', чтобы получить желаемый формат валюты. 

const curr=v=>isNaN(+v)?'':(+v).toLocaleString('en-us',{minimumFractionDigits:2,maximumFractionDigits:2})+' €';
var d={};
['base','ticket','cost'].forEach((id,i)=>{
  d[id]=document.querySelector('#'+id); 
  if(i<2) d[id].addEventListener('change',ev=>{
    var tv=parseFloat(d.ticket.value.replace(/,/g,''));
    d.cost.value=curr(d.base.value*tv*.38);
    d.ticket.value=curr(tv);
  });
})
<form>
  <!-- simple number to start the calculation -->
  <label>Natural Number</label>
  <input type="text" id="base" />
  <br>
  <!-- currency including the cents -->
  <label>Currency value</label>
  <input type="text" id="ticket"/>
  <br>
  <!-- If the first field is "1" and the second is "1,00", this field has a value of 0.38 cents. -->
  <label>Currency total</label>
  <input type="text" id="cost" readonly />
</form>

Хотя я все еще большой поклонник jQuery, я написал выше в Vanilla JS. Это достаточно просто ...

0 голосов
/ 24 февраля 2020

Попробуйте использовать регулярное выражение, чтобы разобрать все не ди git и десятичные символы. Функция toDigits ниже выполняет именно это и позволяет вам использовать обычную математику после этого. 

$(document).ready(function(){
  //add maskMoney listener
  $('#base').keyup(calculate);
  $('#ticket').keyup(calculate);
});

function calculate(e) {
  const percent = 0.38,
    baseValToDigits = toDigits($('#base').val() || 0),
    ticketValToDigits = toDigits($('#ticket').val() || 0),
    costVal = baseValToDigits * ticketValToDigits,
    percentageOfCostVal = costVal * percent;
  //format percentageOfCostVal as currency
  $('#cost').val(percentageOfCostVal).trigger('input')
}
function toDigits(val) {
    const isNeg = /(\(.*\))|^[-]/.test(val),
        digits = parseFloat(val.toString().replace(/[^0-9\.]+/g,""));
    return isNeg ? digits * -1 : +digits;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <!-- simple number to start the calculation -->
  <label>Natural Number</label>
  <input type="text" id="base" />
  <br>
  <!-- currency including the cents -->
  <label>Currency value</label>
  <input type="text" id="ticket" />
  <br>
  <!-- If the first field is "1" and the second is "1,00", this field has a value of 0.38 cents. -->
  <label>Currency total</label>
  <input type="text" id="cost" readonly />
</form>
...