有沒有辦法只允許使用輸入類型=“數字”上的微調控件進行輸入？

Question

我想限制用戶只能使用在 HTML5 中提供input type="number"的微調器更改框的內容，而不能在框中輸入任何內容

<input type="number" min="0" value="0" step="5"/>

我可以這樣做嗎？

（我的目標受眾將只使用 Chrome，因此不會出現在 IE(9) 和 Firefox(13) 上的微調器不是問題）

Answer 1

您可以在此處使用 Javascript onkeydown事件...這將阻止用戶輸入任何內容，但他仍然可以使用箭頭控件來增加和減少數字。

<input type="number" min="0" value="0" step="5" onkeydown="return false" />

演示

注意：不要依賴 JavaScript 和 HTML，始終進行服務器端驗證以確保用戶沒有發布任何惡意輸入。 Javascript 可以被禁用，用戶可以通過在文本框中添加任何文本來濫用，但沒有其他方法可以阻止他，所以也要保持服務器端檢查。

---

正如您評論的那樣，您也希望禁用文本選擇，以免用戶感到困惑，您也可以在這里使用 CSS 定位技術，正如您所說，目標用戶僅限於 Chrome，因此沒有太多跨瀏覽器問題，所以你可以做這樣的事情......

演示 2

用span元素包裹input元素，僅使用 CSS 定位技術和:after偽，我們在input覆蓋一個虛擬元素。

現在我保留大綱僅用於演示目的，您可以安全地刪除它們。

span {
    position: relative;
    outline: 1px solid #00f;
}

span:after {
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    outline: 1px solid red;
    width: 91%;
}

Answer 2

接受的答案使用 onkeydown，這也會禁用微調器； 這里有詳細記錄： https : //developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event

您可以使用 onkeypress 來阻止 charCode 鍵。 但 MDN 表示按鍵正在棄用。 盡管它得到了很好的支持，但建議您不要使用它。 https://caniuse.com/#search=keypress

我的解決方案是使用您自己的功能來按鍵碼進行過濾，並在所有其他鍵碼上使用 preventDefault。 請注意， updateValue是一個自定義函數。 為了讓微調器完成它的工作，你可以在最后遵循內聯方法。

myInputTag = document.getElementsByTagName('input')[0];

myInputTag.onkeydown = onlyUpDownKeys ;

function onlyUpDownKeys(e) {
(e.keyCode===38 || e.keyCode===40) ? updateValue(e): e.preventDefault(); 
}

這將適用於所有鍵盤布局。 在https://caniuse.com/#search=.keycode探索用戶的兼容性

您也可以將其放入 HTML 中的默認內聯 Input 標簽定義中，如下所示：

'<input class="tableCell" type="number" min=0 onkeydown = "!(e.keyCode===38 || e.keyCode===40) && e.preventDefault();">';

Answer 3

對於 ReactJs 用戶，請執行以下操作：

onKeyDown={(e) => {
                              e.preventDefault();
                            }}