在<input type ="number">中允许2个小数位

我有一个,我想将用户的输入限制为纯数字或数字,小数点后2位小数.

基本上,我要求输入价格.

我想避免做正则表达式.有办法吗？

Michael_B.. 260

使用step="any"允许任意数量的小数位,而不是step=".01"允许最多两位小数.

规范中的更多细节:https://www.w3.org/TR/html/sec-forms.html#the-step-attribute

1> Michael_B..：

---

使用step="any"允许任意数量的小数位,而不是step=".01"允许最多两位小数.

规范中的更多细节:https://www.w3.org/TR/html/sec-forms.html#the-step-attribute

---

这不是正确的答案.步骤仅控制单击或按下时发生的情况,并且不限制任何内容.

---

这不起作用.还有其他方法吗？

---

@Michael_B用户不会被阻止在任何输入中键入诸如"500.12345"之类的数字,也许我们对要求的理解是不同的.

2> Weston Gange..：

---

如果有人正在寻找只允许带有可选2位小数的数字的正则表达式

^\d*(\.\d{0,2})?$

举个例子,我发现下面的解决方案相当可靠

HTML:

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); 
    }
  }, 0);
});

---

使用setTimeout（）的目的是什么？

---

@Derek。我以为是regex.test不会阻止DOM。查找以下内容：https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

3> Ultimater..：

---

对于货币,我建议:

Amount $
    

见http://jsfiddle.net/vx3axsk5/1/

当表单提交时,HTML5属性"step","min"和"pattern"将被验证,而不是onblur.你并不需要step,如果你有一个pattern,你不需要pattern,如果你有一个step.所以你可以恢复step="any"使用我的代码,因为模式无论如何都会验证它.

如果你想验证onblur,我相信给用户一个视觉提示也很有用,就像给背景着色一样.如果用户的浏览器不支持type="number",它将回退到type="text".如果用户的浏览器不支持HTML5模式验证,我的JavaScript代码段不会阻止表单提交,但它提供了一个视觉提示.因此,对于HTML5支持较差的人,以及在禁用JavaScript或伪造HTTP请求的情况下试图入侵数据库的人,无论如何都需要再次在服务器上进行验证.前端验证的要点是提供更好的用户体验.因此,只要您的大多数用户都有良好的体验,就可以依赖HTML5功能,前提是代码仍可正常工作,您可以在后端进行验证.

---

根据[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#Pattern_validation),`pattern`不适用于`input type = number`: `元素不支持使用pattern属性使输入的值符合特定的正则表达式模式.其基本原理是数字输入不能包含除数字之外的任何内容,您可以使用min和max属性约束有效数字的最小和最大数量,如上所述.

4> Sachin Sudha..：

---

第1步:将HTML数字输入框挂钩到onchange事件

myHTMLNumberInput.onchange = setTwoNumberDecimal;

或者在HTML代码中

第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

---

**parseFloat(parseFloat(this.value).toFixed(2));**如果你想要十进制或数字类型,你可以在parseFloat()中包装整个东西,因为默认情况下toFixed()方法返回字符串.

5> Nilesh Gajar..：

---

尝试这样只允许输入类型中的2位小数

---

这不会将小数位数限制在Chrome 57中的2个位置