将值设置为中的货币

I am trying to format a number input by the user into currency using javascript. This works fine on <input type="text" />. However, on <input type="number" /> I cannot seem to be able to set the value to anything that contains non-numeric values. The following fiddle shows my problem

我正在尝试使用javascript将用户输入的数字格式化为货币。这适用于。但是，在上，我似乎无法将值设置为任何包含非数值的值。下面的小提琴展示了我的问题

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

Is there anyway for me to set the value to something like $125.00?

我是否可以将值设为125美元?

I want to use <input type="number" /> so mobile devices know to bring up a keyboard for number input.

我想使用，这样移动设备就会知道为数字输入打开一个键盘。

5 个解决方案

#1

Add step="0.01" to the <input type="number" /> parameters:

将step="0.01"添加到参数:

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

Demo: http://jsfiddle.net/uzbjve2u/

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

But the Dollar sign must stay outside the textbox... every non-numeric or separator charachter will be cropped automatically.

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

Otherwise you could use a classic textbox, like described here.

否则，您可以使用一个典型的文本框，就像这里描述的那样。

#2

In the end I made a jQuery plugin that will format the <input type="number" /> appropriately for me. I also noticed on some mobile devices the min and max attributes don't actually prevent you from entering lower or higher numbers than specified, so the plugin will account for that too. Below is the code and an example:

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

#3

You guys are completely right numbers can only go in the numeric field. I use the exact same thing as already listed with a bit of css styling on a span tag:

你们是完全正确的数字只能在数字领域。我使用了和前面列出的一样的东西，在span标签上添加了一些css样式:

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

Then add a bit of styling magic:

然后添加一点造型魔法:

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

#4

It seems that you'll need two fields, a choice list for the currency and a number field for the value.

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

A common technique in such case is to use a div or span for the display (form fields offscreen), and on click switch to the form elements for editing.

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

#5

The browser only allows numerical inputs when the type is set to "number". Details here.

当类型设置为“number”时，浏览器只允许数字输入。详情请点击这里。

You can use the type="text" and filter out any other than numerical input using JavaScript like descripted here

您可以使用type="text"并使用这里描述的JavaScript过滤除数值输入之外的任何输入

#1