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

我有一个<input type="number">，我想将用户的输入限制为纯数字或带小数的数字（最多2个小数位）。

基本上，我要输入价格。

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

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

step="any"可以使用step=".01"最多允许两个小数位，而不是允许使用小数位的。

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

如果情况是有人在寻找正则表达式，该正则表达式只允许数字带有可选的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);
});

对于货币，我建议：

<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/

当提交表单而不是onblur时，将验证HTML5属性“ step”，“ min”和“ pattern”。你并不需要step，如果你有一个pattern，你不需要pattern，如果你有一个step。因此，您可以step="any"使用我的代码，因为该模式无论如何都会对其进行验证。

如果您想验证onblur，我相信为用户提供视觉提示也可以帮助您将背景变成红色。如果用户的浏览器不支持type="number"，则会回退到type="text"。如果用户的浏览器不支持HTML5模式验证，那么我的JavaScript代码段不会阻止表单提交，但会给出视觉提示。因此，对于HTML5支持不佳的人，以及试图在禁用JavaScript或伪造HTTP请求的情况下入侵数据库的人们，无论如何都需要在服务器上再次进行验证。在前端进行验证的目的是为了获得更好的用户体验。因此，只要您的大多数用户都拥有良好的使用经验，就可以依赖HTML5功能，前提是该代码仍然可以运行并且您可以在后端进行验证。

步骤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

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

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

尝试此操作以仅允许输入2个小数

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

或使用@SamohtVII建议的jQuery

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

使用此代码

<input type="number" step="0.01" name="amount" placeholder="0.00">

默认情况下，HTML5 Input元素的Step值为step =“ 1”。

写就好了

<input type="number" step="0.1" lang="nb">

lang ='nb“可让您用逗号或句点写小数

输入时：

step="any"
class="two-decimals"

在脚本上：

$(".two-decimals").change(function(){
  this.value = parseFloat(this.value).toFixed(2);
});