我有一个<input type="number">,我想将用户的输入限制为纯数字或带有小数点后最多2位的数字。
基本上,我是在要求一个价格输入。
我想避免使用正则表达式。有办法吗?
<input type="number" required name="price" min="0" value="0" step="any">
我有一个<input type="number">,我想将用户的输入限制为纯数字或带有小数点后最多2位的数字。
基本上,我是在要求一个价格输入。
我想避免使用正则表达式。有办法吗?
<input type="number" required name="price" min="0" value="0" step="any">
当前回答
输入:
step="any"
class="two-decimals"
脚本:
$(".two-decimals").change(function(){
this.value = parseFloat(this.value).toFixed(2);
});
其他回答
使用step="而不是step="any",因为它允许小数位数任意。“01”,最多允许小数点后两位。
更多详细信息见规范:https://www.w3.org/TR/html/sec-forms.html#the-step-attribute
这是我想出的解决方案,它还可以阻止用户输入超过2个小数,上面提到的许多解决方案都不能防止这种情况
html:
<input autocomplete="off" type="number" id="priceField" step=".01" min="0" onkeypress="return priceCheck(this, event);"
Javascript:
function priceCheck(element, event) {
result = (event.charCode >= 48 && event.charCode <= 57) || event.charCode === 46;
if (result) {
let t = element.value;
if (t === '' && event.charCode === 46) {
return false;
}
let dotIndex = t.indexOf(".");
let valueLength = t.length;
if (dotIndex > 0) {
if (dotIndex + 2 < valueLength) {
return false;
} else {
return true;
}
} else if (dotIndex === 0) {
return false;
} else {
return true;
}
} else {
return false;
}
}
试着在输入类型中只允许2个小数
<input type="number" step="0.01" class="form-control" />
或者使用jQuery的建议@SamohtVII
$( "#ELEMENTID" ).blur(function() {
this.value = parseFloat(this.value).toFixed(2);
});
步骤1:将HTML数字输入框与onchange事件挂钩
myHTMLNumberInput.onchange = setTwoNumberDecimal;
或者HTML代码
<input type="number" onchange="setTwoNumberDecimal" min="0" max="10" step="0.25" value="0.00" />
步骤2:编写setTwoDecimalPlace方法
function setTwoNumberDecimal(event) {
this.value = parseFloat(this.value).toFixed(2);
}
您可以通过改变传递给toFixed()方法的值来改变小数点后的位数。请参阅MDN文档。
toFixed(2); // 2 decimal places
toFixed(4); // 4 decimal places
toFixed(0); // integer
关于货币,我建议:
<div><label>Amount $
<input type="number" placeholder="0.00" required name="price" min="0" value="0" step="0.01" title="Currency" pattern="^\d+(?:\.\d{1,2})?$" onblur="
this.parentNode.parentNode.style.backgroundColor=/^\d+(?:\.\d{1,2})?$/.test(this.value)?'inherit':'red'
"></label></div>
参见http://jsfiddle.net/vx3axsk5/1/
HTML5属性“step”,“min”和“pattern”将在表单提交时验证,而不是onblur。如果你有一个模式,你就不需要步骤,如果你有一个步骤,你就不需要模式。因此,您可以使用我的代码返回到step="any",因为模式无论如何都会验证它。
If you'd like to validate onblur, I believe giving the user a visual cue is also helpful like coloring the background red. If the user's browser doesn't support type="number" it will fallback to type="text". If the user's browser doesn't support the HTML5 pattern validation, my JavaScript snippet doesn't prevent the form from submitting, but it gives a visual cue. So for people with poor HTML5 support, and people trying to hack into the database with JavaScript disabled or forging HTTP Requests, you need to validate on the server again anyways. The point with validation on the front-end is for a better user experience. So as long as most of your users have a good experience, it's fine to rely on HTML5 features provided the code will still works and you can validate on the back-end.