該事件是否beforeinput提供了一種方便的方式來預覽建議修改的結果，以便在必要時可以阻止它以進行驗證？
我不是在尋找其他方法來進行輸入驗證；我已經非常了解涉及keypress和input事件的方法，以及 HTML5 驗證等。現在，我正在專門研究該beforeinput事件以查看它提供的內容。
到目前為止，這是我想出的最好的：
document.getElementById("phone").addEventListener("beforeinput", function(e) {
if(!/^(\d{0,7}|\d{3}-\d{0,4}|)$/.test(e.target.value (e.data ?? ""))) {
e.preventDefault();
}
return;
});<input id="phone">上述代碼段中的文本欄位應接受一個簡單的 7 位電話號碼，并在第 3 位數字后帶有可選的破折號。
請注意，我將事件的data屬性附加到輸入的當前值以創建修改后的值的預覽。如果您僅按順序輸入輸入，則此方法可以正常作業。但是，例如，如果您輸入所有 7 位數字，然后將箭頭回傳到第 3 位之后并嘗試插入破折號，您就不能這樣做，因為驗證假設您位于破折號的末尾無效的。如果您嘗試替換或洗掉選擇，則會出現其他問題。
解決這些問題需要準確的預覽。有沒有一種簡單的方法可以從beforeinput事件中獲得一個？
uj5u.com熱心網友回復：
你必須得到selectionStart并selectionEnd弄清楚有多少字符被洗掉/替換/等等，但是是的，很簡單：
document.getElementById("phone").addEventListener("beforeinput", function(e) {
const nextVal =
e.target.value.substring(0, e.target.selectionStart)
(e.data ?? '')
e.target.value.substring(e.target.selectionEnd)
;
console.log(nextVal)
if(!/^(\d{0,7}|\d{3}-?\d{0,4}|)$/.test(nextVal)) {
e.preventDefault();
}
return;
});<input id="phone">轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/422555.html
標籤：
上一篇：用戶電子郵件和密碼驗證