HTML輸入類型=數字步驟阻止表單提交

Question

我在HTML中有這個代碼：

<input type="number" step="0.1" class="form-group">

我希望用戶能夠輸入一個3位十進制數字，如1.234但step需要為0.1 ，它會拋出一個錯誤，並阻止表單提交。

我已經嘗試過step="0.100"但結果是一樣的。

我還需要驗證其他輸入，因此我不能在<form>標記中使用no validate 。

需要做什么？

Answer 1

一個想法是你可以刪除step屬性，禁用+/-滑塊按鈕，並實現自己的+/-按鈕。 然后，當用戶單擊這些按鈕時，將調用JavaScript函數，該函數檢索輸入區域中的值，將其轉換為數字，然后執行所需的步驟。

使用0.1之類的步驟可能會遇到精度問題。 在下面的代碼片段中，我只是將小數位數修改為兩個。

 function stepUp(step) { let num = Number(document.getElementById('value').value); document.getElementById('value').value = (num + step).toFixed(2); } function stepDown(step) { let num = Number(document.getElementById('value').value); document.getElementById('value').value = (num - step).toFixed(2); } 

 input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } 

 <button onclick="stepDown(0.1)">-</button> <input id="value" type="number" value="0.00"> <button onclick="stepUp(0.1)">+</button> 

Answer 2

我會編寫一個小的自定義內置自定義元素來做到這一點：

 class MyInput extends HTMLInputElement { constructor(step = 0.1, value = '') { super(); this.type = 'number'; this.step = this.getAttribute('step') || step; this.value = this.getAttribute('value') || value; this.addEventListener('input', (e) => { this.value = parseFloat(this.value) + 0.034; }) } } customElements.define('my-input', MyInput, { extends: 'input' }); let input = new MyInput(0.1, 1); document.body.appendChild(input); 

 <!-- if you want to use declaratively: --> <input is="my-input" step="0.1" value="2" /> <hr /> 

這肯定需要一些調整，例如，如果用戶鍵入輸入，但這應該作為一個起點。

Answer 3

您可以使用novalidate並在js中為其他表單字段編寫自己的驗證

 <form novalidate> <input type="number" step="0.1" class="form-group" > <button>submit</button> </form>