Question

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

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

我是否还要将值设置为$125.00？

我想使用<input type="number" />，因此移动设备可以调出键盘输入数字。

Answer 1

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

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

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

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

否则，您可以使用经典文本框like described here。

Answer 2

最后，我制作了一个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" />

Answer 3

你们是完全正确的数字只能进入数字领域。我使用与已经列出的完全相同的东西，在span标记上有一些css样式：

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

然后添加一些造型魔术：

span{
  position:relative;
  margin-right:-20px
}
input[type='number']{
  padding-left:20px;
  text-align:left;
}

Answer 4

您似乎需要两个字段，货币的选择列表和值的数字字段。

在这种情况下，一种常见的技术是使用div或span作为显示（屏幕外的表单字段），然后单击切换到表单元素进行编辑。

Answer 5

当类型设置为“数字”时，浏览器仅允许数字输入。 Details here

您可以使用type =“text”并使用JavaScript like descripted here

过滤除数字输入以外的任何其他内容

在<input type =“number”/>中将值设置为货币

5 个答案: