将值设置为 <input type="number" /> 中的货币

Question

我正在尝试使用 javascript 将用户输入的数字格式化为货币。这适用于 <input type="text" /> 。但是，在 <input type="number" /> 上，我似乎无法将值设置为包含非数字值的任何值。以下小提琴显示了我的问题

http://jsfiddle.net/2wEe6/72/

无论如何我可以将值设置为 $125.00 ？

我想使用 <input type="number" /> 以便移动设备知道要调出键盘进行数字输入。

原文由 Danny 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

最后，我制作了一个 jQuery 插件，它将为我适当地格式化 <input type="number" /> 。我还注意到一些移动设备上的 min 和 max 属性实际上并不能阻止您输入比指定更低或更高的数字，因此插件也会考虑这一点。下面是代码和示例：

 (function($) {
  $.fn.currencyInput = function() {
    this.each(function() {
      var wrapper = $("<div class='currency-input' />");
      $(this).wrap(wrapper);
      $(this).before("<span class='currency-symbol'>$</span>");
      $(this).change(function() {
        var min = parseFloat($(this).attr("min"));
        var max = parseFloat($(this).attr("max"));
        var value = this.valueAsNumber;
        if(value < min)
          value = min;
        else if(value > max)
          value = max;
        $(this).val(value.toFixed(2));
      });
    });
  };
})(jQuery);

$(document).ready(function() {
  $('input.currency').currencyInput();
});

 .currency {
  padding-left:12px;
}

.currency-symbol {
  position:absolute;
  padding: 2px 5px;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="number" class="currency" min="0.01" max="2500.00" value="25.00" />

原文由 Danny 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

添加 step="0.01" 到 <input type="number" /> 参数：

 <input type="number" min="0.01" step="0.01" max="2500" value="25.67" />

演示：http: //jsfiddle.net/uzbjve2u/

但是美元符号必须留在文本框之外……每个非数字或分隔符都将被自动裁剪。

否则，您可以使用经典文本框， 如此处所述。

原文由 Andrea Ligios 发布，翻译遵循 CC BY-SA 3.0 许可协议