HTML5中是否有浮点输入类型？-Java 学习之路

590

根据html5.org，"number"输入类型的"value attribute, if specified and not empty, must have a value that is a valid floating point number."

然而它简直（在最新版本的Chrome中，无论如何），一个带有整数的“updown”控件，而不是浮点数：

<input type="number" id="totalAmt"></input>

是否存在HTML5原生的浮点输入元素，或者使数字输入类型与浮点数一起工作的方法，而不是整数？或者我必须使用jQuery UI插件？

7 回答

9
您可以使用：
```
<input type="number" step="any" min="0" max="100" value="22.33">
```
希望能帮到，问候
回复于 2024-04-27T23:36:53+08:00
2
途经：http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

但是，如果您希望所有数字都有效，整数和小数相同怎么办？在这种情况下，将步骤设置为“任何”
```
<input type="number" step="any" />
```
在Chrome中适用于我，未在其他浏览器中测试过 .
回复于 2024-04-27T23:36:53+08:00
1210
您可以将step属性用于输入类型编号：
```
<input type="number" id="totalAmt" step="0.1"></input>
```
step="any" 将允许任何小数 .
step="1" 将不允许小数 .
step="0.5" 将允许0.5; 1; 1.5; ...
step="0.1" 将允许0.1; 0.2; 0.3; 0.4; ...
回复于 2024-04-27T23:36:53+08:00

基于this回答

<input type="text" id="sno" placeholder="Only float with dot !"   
   onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||  
   event.charCode == 46 || event.charCode == 0 ">

含义：

字符代码：

48-57等于 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
0是 Backspace （否则需要在Firefox上刷新页面）
46是 dot

&& 是 AND ， || 是 OR 运算符 .

如果你用逗号浮动：

<input type="text" id="sno" placeholder="Only float with comma !"   
     onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||  
     event.charCode == 44 || event.charCode == 0 ">

Supported Chromium and Firefox (Linux X64) （其他浏览器我不存在 . ）

回复于 2024-04-27T23:36:53+08:00

115

我只是遇到了同样的问题，我可以通过在 French localization 中放一个 comma 而不是 period / full stop 来修复它 .

所以它适用于：

2可以

2,5可以

2.5是KO（该数字被视为“非法”，您将获得空值） .

回复于 2024-04-27T23:36:53+08:00

我这样做了

<input id="relacionac" name="relacionac" type="number" min="0.4" max="0.7" placeholder="0,40-0,70" class="form-control input-md" step="0.01">

然后，我将min定义为0.4，最大值定义为0.7，步骤0.01：0.4,0.41,0,42 ... 0.7

回复于 2024-04-27T23:36:53+08:00

3
number 类型具有 step 值，用于控制哪些数字有效（以及 max 和 min ），默认为 1 . 步进按钮的实现也使用该值（即按下增加 step ） .

只需将此值更改为适当的值即可 . 为了钱，可能需要两位小数：
```
<input type="number" step="0.01">
```
（如果它只能是正数，我也会设置 min=0 ）

如果您希望允许任意数量的小数位，可以使用 step="any" （但对于货币，我建议坚持使用 0.01 ） . 在Chrome和Firefox中，使用 any 时，步进按钮将递增/递减1 . （感谢Michal Stefanow的回答指出 any 和see the relevant spec here）

这是一个操场，显示各种步骤如何影响各种输入类型：
```
<form>
  <input type=number step=1 /> Step 1 (default)

  <input type=number step=0.01 /> Step 0.01

  <input type=number step=any /> Step any

  <input type=range step=20 /> Step 20

  <input type=datetime-local step=60 /> Step 60 (default)

  <input type=datetime-local step=1 /> Step 1

  <input type=datetime-local step=any /> Step any

  <input type=datetime-local step=0.001 /> Step 0.001

  <input type=datetime-local step=3600 /> Step 3600 (1 hour)

  <input type=datetime-local step=86400 /> Step 86400 (1 day)

  <input type=datetime-local step=70 /> Step 70 (1 min, 10 sec)

</form>
```
像往常一样，我会添加一个快速注释：请记住，客户端验证只是方便用户 . 您还必须在服务器端验证！
回复于 2024-04-27T23:36:53+08:00

HTML5中是否有浮点输入类型？

7 回答

相关问题