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

时间:2015-08-12 15:25:41

标签: javascript jquery currency percentage

我只能在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">$30,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">$27,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

1 个答案:

答案 0 :(得分:0)

您的问题是您假设输入中的值为数字。由于您使用非数字字符格式化它们(但不能将其转换为数字)。

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

由于您乘以的值不是数字,因此会抛出错误。

为了能够将这些字符串相乘(或者确切地说是它们所代表的值),您需要先格式化字符串,然后再将其转换为数字并进行计算!

你会在https://jsfiddle.net/hn669das/18/找到一个有效的例子。

顺便说一下:更好地使用change-event进行格式化而不是keyUp-event,因为当用户想要写入时操作输入时用户将无法写入未受干扰的输入它。当输入失去焦点时,更改事件将触发,因此不会打扰用户。

我希望能帮到你!