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

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/

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

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

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;
}