Javascript 在 <input type="number" /> 中将值设置为货币
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14650932/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set value to currency in <input type="number" />
提问by Danny
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 将用户输入的数字格式化为货币。这在<input type="text" />. 但是，<input type="number" />我似乎无法将值设置为包含非数字值的任何内容。以下小提琴显示了我的问题
Is there anyway for me to set the value to something like $125.00?
无论如何我可以将值设置为类似的值$125.00吗？
I want to use <input type="number" />so mobile devices know to bring up a keyboard for number input.
我想使用<input type="number" />移动设备知道调出数字输入的键盘。
采纳答案by Danny
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 minand maxattributes 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 插件，它将<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" />回答by Andrea Ligios
Add step="0.01"to the <input type="number" />parameters:
添加step="0.01"到<input type="number" />参数：
<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.
否则，您可以使用经典文本框，如此处所述。
回答by William Hagan
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;
}
回答by Christophe
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 进行显示（屏幕外的表单字段），然后单击切换到表单元素进行编辑。
回答by mojoaxel
The browser only allows numerical inputs when the type is set to "number". Details here.
当类型设置为“数字”时，浏览器仅允许数字输入。详情请看这里。
You can use the type="text" and filter out any other than numerical input using JavaScript like descripted here
您可以使用 type="text" 并使用 JavaScript 过滤掉除数字输入之外的任何其他内容，如此处所述
