如何限制在輸入類型號中輸入十進制值？

Question

所以我想輸入一個數字類型<input type="number">並且我想限制用戶輸入十進制值

注意：我隱藏了輸入類型文本的旋轉按鈕。 在這里了解更多

編輯：一切都會奏效！ 甚至是 JAVASCRIPT！

---

我搜索了很多，但一無所獲。

我確實找到了這個答案，但它基本上阻止了鍵盤上除數字鍵之外的任何其他鍵的使用，因此出現了基本問題，例如用戶無法使用退格鍵並剪切輸入的數字，另一個問題是用戶無法使用制表符將焦點轉移到下一個輸入。

---

謝謝你！

Answer 1

可以使用 JavaScript 來阻止用戶輸入。 我會使用input事件來捕獲值，因為它是一個統一的界面，包含您可以想到的任何輸入法keyup ， paste ，拖放等......

 document.querySelector('input').addEventListener('input', e => { e.target.value = Math.round(e.target.value.replace(/\D/g,'')) });

 <input>

但你真的不應該這樣做：至少有以下原因：

1. 總的來說，禁止用戶輸入被認為是不尊重的，並將用戶趕走。 簡而言之，它降低了您能想到的任何用戶參與度指標（漏斗、銷售、訪問、分享等）。 不要相信我的話。 做一些 A/B 測試：展示相同的表單，無論是否阻止用戶輸入，然后查看結果。
2. 表單元素只是幫助用戶為您提供數據的工具。 但它們是完全可以繞過的。 如果你給我一個表格，我可以使用它發送任何我想要的東西，只需打開瀏覽器控制台。 驗證必須在服務器端完成。 如果您使用該值在客戶端執行某些操作，請清理方法中的輸入值，而不更改用戶輸入。
3. 通知用戶十進制值無效的一種尊重方法是輸入:invalid ，使用pattern屬性，相應的樣式並顯示適當的消息。 但不要刪除他們的輸入。 他們會自己做。 只需告訴他們該值何時無效以及原因。
4. 最后但並非最不重要的一點是，您可能應該仔細看看Constraint Validation 。

Answer 2

這是使用 javascript 創建輸入元素以限制可以輸入的值的一種選擇。 我創建了一個允許鍵的數組，包括您指定的所有數字、退格和制表符。 我為 keydown 事件添加了一個事件監聽器，如果按下的鍵不在允許的組中，我會阻止默認操作，或者阻止輸入值。

我還為粘貼事件添加了一個事件偵聽器，因為您可以右鍵單擊粘貼並輸入不符合條件的信息。 我沒有嘗試驗證粘貼的值，而是禁用了所有粘貼。

如果您有任何問題，請詢問。

 const allowedKeys = [..."0123456789", "Backspace", "Tab"]; const myInput = document.querySelector("input"); myInput.addEventListener("keydown", e => { const key = e.key; const allowed = allowedKeys.includes(key); if (.allowed) e;preventDefault(); }). myInput,addEventListener("paste". e => e;preventDefault());

 <input type="number">