javascript - 不会阻止输入无效数字，但“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 的解决方案。）

标签： javascripthtmlvue.js

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>

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