在中允许有2位小数

I have a <input type="number"> and I want to restrict the input of the users to purely numbers or numbers with decimals up to 2 decimal places.

我有一个 <输入类型="number"> ，我想要将用户的输入限制为纯数字或小数，小数点后2位。

Basically, I am asking for a price input.

基本上，我要求的是价格投入。

I wanted to avoid doing regex. Is there a way to do it?

我想避免使用regex。有办法吗?

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

7 个解决方案

#1

116

Instead of step="any", which allows for any number of decimal places, use step=".01", which allows up to two decimal places.

而不是step="any"，它允许任意数量的小数位数，使用step="。01"，最多允许小数点后两位。

More details in the spec: https://www.w3.org/TR/html/sec-forms.html#the-step-attribute

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

#2

For currency, I'd suggest:

对于货币来说,我建议:

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

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

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

The HTML5 properties "step", "min" and "pattern" will be validated when the form is submit, not onblur. You don't need the step if you have a pattern and you don't need a pattern if you have a step. So you could revert back to step="any" with my code since the pattern will validate it anyways.

当表单提交时，HTML5属性“step”、“min”和“pattern”将被验证，而不是onblur。如果你有一个模式，你不需要步骤;如果你有一个步骤，你也不需要模式。因此，您可以使用我的代码恢复到步骤=“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.

如果您想验证onblur，我相信给用户一个视觉提示也是很有帮助的，就像把背景涂成红色一样。如果用户的浏览器不支持type="number"，则返回到type="text"。如果用户的浏览器不支持HTML5模式验证，我的JavaScript代码并没有阻止表单提交，但是它提供了一个视觉提示。因此，对于那些缺乏HTML5支持的人，以及试图通过JavaScript禁用或伪造HTTP请求来入侵数据库的人，您需要再次在服务器上进行验证。前端验证的要点是更好的用户体验。因此，只要您的大多数用户都有良好的体验，只要代码仍然有效，并且可以在后端进行验证，那么依赖HTML5特性就可以了。

#3

Step 1: Hook your HTML number input box to an onchange event

步骤1:将HTML数字输入框连接到onchange事件

myHTMLNumberInput.onchange = setTwoNumberDecimal;

or in the html code

或者在html代码中

<input type="number" onchange="setTwoNumberDecimal" min="0" max="10" step="0.25" value="0.00" />

Step 2: Write the setTwoDecimalPlace method

步骤2:编写setTwoDecimalPlace方法

function setTwoNumberDecimal(event) {
    this.value = parseFloat(this.value).toFixed(2);
}

you can change 2 or more decimals from

你可以改变2个或更多的小数

tofixed(2)

tofixed(2)

#4

If case anyone is looking for a regex that allows only numbers with an optional 2 decimal places

如果有人正在寻找一个regex，它只允许有两个可选小数的数字

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

#5

Try this for allowing only 2 decimal in input type

输入类型中只允许有2个小数

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

#6

-1

Use this code

使用这个代码

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

By default Step value for HTML5 Input elements is step="1".

HTML5输入元素默认的步骤值是步骤=“1”。

#7

-5

On input:

输入:

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

On script:

脚本:

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

#1

116