我有一个<input type="number">，我想将用户的输入限制为纯数字或带有小数点后最多2位的数字。
基本上，我是在要求一个价格输入。
我想避免使用正则表达式。有办法吗?
<input type="number" required name="price" min="0" value="0" step="any">
当前回答
使用Javascript在文本框中只输入3个小数点。
<input type="text" class="form-control" onkeypress='return AllowOnlyAmountAndDot(this,event,true);/>
function AllowOnlyAmountAndDot(id, e, decimalbool) {
if(decimalbool == true) {
var t = id.value;
var arr = t.split(".");
var lastVal = arr.pop();
var arr2 = lastVal.split('');
if (arr2.length > '2') {
e.preventDefault();
}
}
}
其他回答
步骤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
使用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;
}
}
我对其中一些解决方案有过一段奇怪的编辑经历。从用户的角度来看，这似乎非常有效(只在必要时进行干预):
function handleNumberChanged (e) {
const fixed = parseFloat(e.target.value).toFixed(2).toString()
if (fixed.length < parseFloat(e.target.value).toString().length)
e.target.value = fixed
}
如果有人正在寻找一个正则表达式，只允许数字与可选的2小数点后
^\d*(\.\d{0,2})?$
例如，我发现下面的解决方案相当可靠
HTML:
<input name="my_field" pattern="^\d*(\.\d{0,2})?$" />
JS / JQuery:
$(document).on('keydown', 'input[pattern]', function(e){
var input = $(this);
var oldVal = input.val();
var regex = new RegExp(input.attr('pattern'), 'g');
setTimeout(function(){
var newVal = input.val();
if(!regex.test(newVal)){
input.val(oldVal);
}
}, 1);
});
