HTML5 中有浮點輸入類型嗎？

Question

根據html5.org ，“數字”輸入類型的“值屬性，如果指定且不為空，則必須具有一個有效浮點數的值。”

然而，它只是（無論如何在最新版本的 Chrome 中），一個帶有整數的“updown”控件，而不是浮點數：

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

是否有 HTML5 原生的浮點輸入元素，或者有一種方法可以使數字輸入類型與浮點數一起使用，而不是整數？ 還是我必須求助於 jQuery UI 插件？

Answer 1

number類型有一個step值，用於控制哪些數字是有效的（以及max和min ），默認為1 。 該值也被用於步進按鈕的實現（即按step增加）。

只需將此值更改為適當的值。 對於金錢，可能需要保留小數點后兩位：

<label for="totalAmt">Total Amount</label>
<input type="number" step="0.01" id="totalAmt">

（如果它只能是正數，我也會設置min=0 ）

如果您希望允許任何小數位數，您可以使用step="any" （盡管對於貨幣，我建議堅持使用0.01 ）。 在 Chrome 和 Firefox 中，使用any . （感謝 Michal Stefanow 指出any問題的答案，並在此處查看相關規范）

這是一個游樂場，展示了各種步驟如何影響各種輸入類型：

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

---

像往常一樣，我將添加一個簡短的說明：請記住，客戶端驗證只是為用戶提供便利。 您還必須在服務器端進行驗證！

Answer 2

通過： http ://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

但是，如果您希望所有數字都是有效的，整數和小數都一樣怎么辦？ 在這種情況下，將 step 設置為“any”

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

---

在 Chrome 中為我工作，未在其他瀏覽器中測試。

Answer 3

您可以使用：

<input type="number" step="any" min="0" max="100" value="22.33">

Answer 4

您可以使用 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; ...

Answer 5

基於這個答案

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

支持 Chromium 和 Firefox (Linux X64) （其他瀏覽器我不存在。）

Answer 6

我這樣做

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

然后，我在 0.4 中定義最小值，在 0.7 中定義最大值，步長為 0.01：0.4, 0.41, 0,42 ... 0.7

Answer 7

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

Answer 8

我已經開始使用inputmode="decimal" ，它可以在智能手機上完美運行：

<input type="text" inputmode="decimal" value="1.5">

請注意，我們必須使用type="text"而不是number 。 但是，在桌面上它仍然允許字母作為值。

對於桌面，您可以使用：

<input type="number" inputmode="decimal">

這允許0-9和. 作為輸入且僅作為數字。

請注意，某些國家/地區使用,作為小數除數，它在 NumPad 上默認激活。 因此，通過 Numpad 輸入浮點數將無法正常工作，因為輸入字段需要. （在鉻）。 這就是為什么如果您的網站上有國際用戶，您應該使用type="text" 。

您可以在桌面（也可以使用 Numpad）和手機上嘗試此操作：

 <p>Input with type text:</p> <input type="text" inputmode="decimal" value="1.5"> <br> <p>Input with type number:</p> <input type="number" inputmode="decimal" value="1.5">

參考： https ://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

Answer 9

是的，這是正確的答案：

step="any"

這樣更有效率。 相信我。

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

 document.getElementById('form1').addEventListener('submit', function(e){ e.preventDefault(); alert("Your nnumber is: "+document.getElementById('n1').value) alert("This works no ? :) please upvote") })

 <form id="form1"> <input type="number" step="any" id="n1"> <button type="submit">Submit</button> </form> <!-- UPVOTE :)-->

Answer 10

我只是遇到了同樣的問題，由於法語本地化，我可以通過在數字中加上逗號而不是句號/句號來解決它。

所以它適用於：

2沒問題

2,5還可以

2.5 是 KO（該數字被認為是“非法的”並且您收到空值）。

Answer 11

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

這對我有用，我認為這是讓輸入字段接受任何十進制數字的最簡單方法，而不管小數部分有多長。 Step 屬性實際上顯示了輸入字段應該接受多少個小數點。 例如，step="0.01" 將只接受兩個小數點。

Answer 12

在我的 iPad 上使用 React， type="number"對我來說並不完美。 對於 99.99999 - .00000 范圍內的浮點數，我使用正則表達式(^[0-9]{0,2}$)|(^[0-9]{0,2}\.[0-9]{0,5}$) 。 第一組(...)對於所有不帶浮點的正兩位數 (例如 23) 為真， | 或例如 .12345 用於第二組(...) 。 您可以通過簡單地分別更改范圍{0,2}或{0,5}將其用於任何正浮點數。

<input
  className="center-align"
  type="text"
  pattern="(^[0-9]{0,2}$)|(^[0-9]{0,2}\.[0-9]{0,5}$)"
  step="any"
  maxlength="7"
  validate="true"
/>

Answer 13

該主題（例如step="0.01" ）與 stepMismatch 相關，所有瀏覽器都支持如下：

Answer 14

如果任何方法都不起作用，您可以使用 parse float。

 const totalAmt = document.getElementById("totalAmt"); totalAmt.addEventListener("change", (e)=>{ // e.preventDefault(e); const result = parseFloat(e.target.value); console.log(result) });

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