<input type=“number”>不會阻止無效數字輸入，但“element.value”不允許我更正它們

Question

從關於<input type="number">的MDN 文檔中：

它們包括用於拒絕非數字條目的內置驗證。

這是否意味着“嘗試提交 HTML 表單時拒絕”？ 我輸入了“4e4--23”。 HTML 沒有拒絕它。

因此， <input type="number">不能阻止非數字值的輸入。 如果我可以以編程方式更正用戶的輸入，我不在乎。 例如，用戶輸入的減號不在第一個位置 - 使用 JavaScript，理論上我可以刪除它。

然而，這是不明顯的 JavaScript 行為：當輸入元素具有“數字”屬性並且value無效數字時， Element.value返回一個空字符串。 這是非常棘手的編程驗證：因為我們有空字符串值，驗證器將返回“輸入不能為空。請輸入值。” 輸入不為空時出錯！

 document.getElementById("target").addEventListener("input", blackbox => { console.log(document.getElementById("target").value); });

 <input type="number" value="" id="target">

我怎樣才能得到實際輸入的值？ （如果你知道Vue，也請添加Vue的解決方案。）

Answer 1

嘗試這個：

 I only accept numbers: <input type="text" v-model="form.availability" oninput="this.value = this.value.replace(/[^0-9]/g, '');"> <br> I only accept numbers inlcuding a point: <input type="text" v-model="form.availability" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\\..*)\\./g, '$1');"> <br> EDIT: I accept negative numbers inlcuding a point: <input type="text" v-model="form.availability" oninput="this.value = this.value.replace(/[^0-9.-]/g, '').replace(/(\\..*)\\./g, '$1');"> <br> EDIT: I accept negative numbers inlcuding a point: <input type="text" v-model="form.availability" oninput="this.value = this.value.replace(/[^0-9.-]/g, '').replace(/(\\..*)\\./g, '$1').replace(/(\\..*)\\./g, '$1');"> <br> EDIT2: I accept negative numbers inlcuding a point (only one "minus" sign): <input type="text" v-model="form.availability" oninput="this.value = this.value.replace(/[^0-9.-]/g, '').replace(/(\\..*)\\./g, '$1').replace(/(\\..*)\\./g, '$1').replace(/(\\-.*)\\-/g, '$1');"> <br> EDIT3: I also accept "e" and "E" <input type="text" v-model="form.availability" oninput="this.value = this.value.replace(/[^0-9\\.\\-\\e\\E]/g, '').replace(/(\\..*)\\./g, '$1').replace(/(\\..*)\\./g, '$1').replace(/(\\-.*)\\-/g, '$1').replace(/(\\e.*)\\e/g, '$1').replace(/(\\E.*)\\E/g, '$1');"> <br>

不同瀏覽器對“輸入類型編號”的處理方式不同

Answer 2

嘗試<input type="number" inputmode="numeric">或<input type="tel" inputmode="numeric">