<input type="number"> 不会阻止无效数字输入，但“element.value”不允许我更正它们

Question

来自MDN 文档关于<input type="number">：

它们包括用于拒绝非数字条目的内置验证。

这是否意味着“尝试提交 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>

不同浏览器对“输入类型编号”的处理方式不同