我正在尝试使用 javascript 将用户输入的数字格式化为货币。这在<input type="text" />. 但是，<input type="number" />我似乎无法将值设置为任何包含非数字值的值。以下小提琴显示了我的问题
无论如何我可以将值设置为类似的值$125.00吗？
我想使用<input type="number" />以便移动设备知道要调出键盘进行数字输入。
问问题
248625 次
5 回答
84
添加参数step="0.01"：<input type="number" />
<input type="number" min="0.01" step="0.01" max="2500" value="25.67" />
演示：http: //jsfiddle.net/uzbjve2u/
但是美元符号必须留在文本框之外......每个非数字或分隔符都会被自动裁剪。
否则，您可以使用经典文本框，如此处所述。
于 2013-02-01T16:44:36.073 回答
27
<input type="number" />最后，我制作了一个 jQuery 插件，可以为我设置合适的格式。我还注意到，在某些移动设备上，minandmax属性实际上并不会阻止您输入比指定更低或更高的数字，因此插件也会考虑这一点。下面是代码和示例：
(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" />于 2013-02-05T16:33:47.547 回答
10
你们是完全正确的数字只能进入数字字段。我使用与已经列出的完全相同的东西，在 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;
}
于 2013-10-29T23:06:12.327 回答
4
您似乎需要两个字段，一个用于货币的选择列表和一个用于值的数字字段。
在这种情况下，一种常见的技术是使用 div 或 span 进行显示（屏幕外的表单字段），然后单击切换到表单元素进行编辑。
于 2013-02-01T16:50:40.433 回答