jQuery - 在 Firefox 中将数字输入值设置为浮点数

Question

我有一个绑定到特定类（附加到数字类型输入）的模糊事件的函数，该函数旨在强制保留两位小数。以下函数在 Chrome 中有效，但在 Firefox 中无效。

代码：

/**
 *	Force 2 decimal places for specified inputs
 *
 */
$(document).on('blur', '.to-dec', function() {

  // get value
  var value = $(this).val();

  // no value
  if (!value) return;

  // cast to 2 decimal places
  value = parseFloat(value).toFixed(2);

  // update value
  $(this).val(value);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" class="to-dec" min="0" step="0.01" required>

如果我在设置之前输出value，我会得到预期值（即输入值为 3 时为 3.00）。

有人知道为什么 Firefox 会阻止设置这个值吗？在使用val() 设置值时，我已经尝试使用parseFloat()。

谢谢！

Answer 1

使其在 FireFox 中工作的一种简单方法是将输入类型设置为“文本”，并通过对代码稍作修改来保持类型编号行为，例如如果值为 NaN，则清除输入。

$(document).on('blur', '.to-dec', function() {
  // get value
  var value = $(this).val();
  if (isNaN(value)) {
    $(this).val('');
  } else if (!value) {
    // no value
    return;
  } else {
    // cast to 2 decimal places
    value = parseFloat(value).toFixed(2);
    // update value
    $(this).val(value);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="to-dec" min="0" step="0.01">