javascript - 如何预览 beforeinput 事件的结果？

Question

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 获得一个？事件？

Answer 1

你必须得到 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">