在输入字段中格式化货币和百分比

Question

我只能在 a3 中插入一个“$”符号。我还需要为 a1 插入“$”符号，但是当我像这样为 a1 字段插入格式时

$('#a3').val(格式($('#a1').val(格式) * $('#a2').val()));

我收到一个错误。最好的方法是什么？

HTML

<table class="table">
    <tbody>
        <tr>
            <td>You</td>
            <td class="light-gray">Example</td>
        </tr>
        <tr>
            <td width="20%">a1
                <input type="textbox" class="form-control" id="a1" name="a1" />
            </td>
            <td width="20%" class="light-gray">,000</td>
        </tr>
        <tr>
            <td>a2
                <input type="text" class="form-control" id="a2" name="a2" />
            </td>
            <td class="light-gray">90%</td>
        </tr>
        <tr>
            <td>a3
                <input type="text" class="form-control" id="a3" name="a3" data-cell="a3" />
            </td>
            <td class="light-gray">,000</td>
        </tr>
        <tr class="heading">
            <th colspan="2">&nbsp;</th>
        </tr>
</table>

jQuery

  $(document).ready(function () {

  var format = function (num) {
      var str = num.toString().replace("$", ""),
          parts = false,
          output = [],
          i = 1,
          formatted = null;
      if (str.indexOf(".") > 0) {
          parts = str.split(".");
          str = parts[0];
      }
      str = str.split("").reverse();
      for (var j = 0, len = str.length; j < len; j++) {
          if (str[j] != ",") {
              output.push(str[j]);
              if (i % 3 == 0 && j < (len - 1)) {
                  output.push(",");
              }
              i++;
          }
      }
      formatted = output.reverse().join("");
      return ("$" + formatted + ((parts) ? "." + parts[1].substr(0, 2) : ""));
  };
  $("#a1,#a2").keyup(function (e) {
      $('#a3').val(format($('#a1').val() * $('#a2').val()));
  });

});

JSFiddle Examples

Answer 1

您的问题是您假设输入中的值是数字。由于您使用非数字字符格式化它们，因此它们不是（并且不能转换为数字）。

$('#a1').val() * $('#a2').val()

由于您乘以的值不是数字，因此会引发错误。

为了能够将这些字符串相乘（或者准确地说是它们所代表的值），您需要取消格式化字符串，然后才能将它们转换为数字并进行计算！

您将在 https://jsfiddle.net/hn669das/18/ 找到一个工作示例。

顺便说一句： 最好使用 change-event 而不是 keyUp-event 进行格式化，因为当用户在操作输入时，用户将无法不受干扰地写入输入打算写信给它。更改事件将在输入失去焦点时触发，因此不会打扰用户。

希望对您有所帮助！

在输入字段中格式化货币和百分比

Formatting currency and percentage in input field

javascript

jquery

currency

percentage