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

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

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

无论如何,我是否需要将值设置为<input type="number" />

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

5个解决方案
65 votes

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 answered 2019-11-07T12:00:55Z
19 votes

最后,我制作了一个jQuery插件,可以为我适当地格式化<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" />。 我还注意到,在某些移动设备上,minmax属性实际上并不能阻止您输入比指定的数字低或高的数字,因此插件也可以解决这一问题。 下面是代码和示例:

<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" />
<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" />
<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 answered 2019-11-07T12:01:31Z
8 votes

你们完全正确,数字只能在数字字段中输入。 我使用与已经在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;
}
William Hagan answered 2019-11-07T12:02:03Z
3 votes

看来您将需要两个字段,一个用于货币的选择列表和一个用于值的数字字段。

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

Christophe answered 2019-11-07T12:02:37Z
-1 votes

当类型设置为“数字”时,浏览器仅允许数字输入。 详细信息在这里。

您可以使用type =“ text”并使用如此处所述的JavaScript过滤除数字输入以外的任何内容

mojoaxel answered 2019-11-07T12:03:11Z
translate from https://stackoverflow.com:/questions/14650932/set-value-to-currency-in-input-type-number