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

Question

我有一个<input type="number">,我想将用户的输入限制为纯数字或数字,小数点后2位小数.

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

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

<input type="number" required name="price" min="0" value="0" step="any">

Answer 1

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

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

Answer 2

如果有人正在寻找只允许带有可选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); 
    }
  }, 0);
});

Answer 3

对于货币,我建议:

<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,如果你有一个pattern,你不需要pattern,如果你有一个step.所以你可以恢复step="any"使用我的代码,因为模式无论如何都会验证它.

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

Answer 4

第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

Answer 5

只是添加step=".01"，解决了我的问题。

<input type="number" class="form-control" name="price" step=".01">

Answer 6

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

<input type="number" step="0.01" class="form-control"  />

Answer 7

我发现使用 jQuery 是我最好的解决方案。

$( "#my_number_field" ).blur(function() {
    this.value = parseFloat(this.value).toFixed(2);
});