html5 – HTML(5)中是否有一个float输入类型?

前端之家收集整理的这篇文章主要介绍了html5 – HTML(5)中是否有一个float输入类型?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
根据 http://simon.html5.org/html-elements,“number”输入类型的“value”属性,如果指定且不为空,则必须具有为有效浮点数的值。

然而,它是简单的(在chrome.latest,反正),一个“updown”控件与整数,而不是浮动:

body {
  background-color: lightyellow;
}
header {
  font-family:'Segoe UI','Segoe Light','Courier New',sans-serif;
  //font-weight: bold;
  padding-left: 15px;
  background-color: Blue;
  color: White;
}
label {
  font-family: Consolas,'Segoe UI',sans-serif;
  margin-left: 10px;
  min-width: 120px;
}
input {
  float:right;
}
.clearBoth {
  clear:both;
}
<header>New Delivery - @SerialNumber</header>
</br>
<label>Invoice #</label>
<input type="text" id="invoiceNumber"></input>
<div class="clearBoth"></div>
<label>Date</label>
<input type="date" id="date"></input>
<div class="clearBoth"></div>
<label>Total Amt $</label>
<input type="number" id="totalAmt"></input>

有没有一个浮点输入元素原生到HTML5,或一种方法使数字输入类型使用浮动,而不是int?或者我必须诉诸一个jQuery UI插件吗?

解决方法

数字类型具有控制哪些数字有效(连同max和min)的步长值,默认为1.该值也由步进按钮的实现使用(即按下步长增加)。

只需将此值更改为适当的值即可。对于金钱,可能需要两个小数位:

<input type="number" step="0.01">

(我也设置min = 0如果它只能是正数)

如果你喜欢允许任何数量的小数位,你可以使用step =“任何”(虽然对于货币,我建议坚持0.01)。在Chrome和Firefox,步进按钮将使用任何时增加/减1。 (感谢Michal Stefanow的答案指出任何,和see the relevant spec here)

这里是一个操场,显示各种步骤如何影响各种输入类型:

<form>
  <input type=number step=1 /> Step 1 (default)<br />
  <input type=number step=0.01 /> Step 0.01<br />
  <input type=number step=any /> Step any<br />
  <input type=range step=20 /> Step 20<br />
  <input type=datetime-local step=60 /> Step 60 (default)<br />
  <input type=datetime-local step=1 /> Step 1<br />
  <input type=datetime-local step=any /> Step any<br />
  <input type=datetime-local step=0.001 /> Step 0.001<br />
  <input type=datetime-local step=3600 /> Step 3600 (1 hour)<br />
  <input type=datetime-local step=86400 /> Step 86400 (1 day)<br />
  <input type=datetime-local step=70 /> Step 70 (1 min,10 sec)<br />
</form>

像往常一样,我将添加一个快速备注:记住客户端验证只是一个方便的用户。您还必须在服务器端验证!

原文链接:https://www.f2er.com/html5/170734.html

猜你在找的HTML5相关文章