我正在尝试使用 javascript 将用户输入的数字格式化为货币。这在<input type="text" />. 但是，<input type="number" />我似乎无法将值设置为包含非数字值的任何内容。以下小提琴显示了我的问题
无论如何我可以将值设置为类似的值$125.00吗？
我想使用<input type="number" />移动设备知道调出数字输入的键盘。
在 <input type="number" /> 中将值设置为货币
IT技术
javascript
jquery
html
currency-formatting
2021-03-01 17:45:56
5个回答
添加step="0.01"到<input type="number" />参数：
<input type="number" min="0.01" step="0.01" max="2500" value="25.67" />
演示：http : //jsfiddle.net/uzbjve2u/
但是美元符号必须留在文本框之外......每个非数字或分隔符都将被自动裁剪。
否则，您可以使用经典文本框，如此处所述。
最后，我制作了一个 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" />你们是完全正确的数字只能进入数字字段。我使用与已经列出的完全相同的东西，并在 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;
}
似乎您需要两个字段，货币的选择列表和值的数字字段。
在这种情况下，常用的技术是使用 div 或 span 进行显示（屏幕外的表单字段），然后单击切换到表单元素进行编辑。
其它你可能感兴趣的问题