在

Question

我正在尝试使用javascript将用户输入的数字格式化为货币。这在

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

我是否可以将值设置为125.00美元之类的值？

我想用




Answer 1

你们是完全正确的数字只能在数字字段中显示。我在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 2

最后我做了一个jQuery插件，将格式化

(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

将step=“0.01”添加到

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

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

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

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