<输入类型=“数字">不会阻止输入无效数字,而是"element.value".不允许我纠正它们 [英] <input type="number"> does not prevent the invalid numbers inputting, but "element.value" does not allow me to correct them
问题描述
摘自
因此,<输入类型=数字">
不能阻止非数字值的输入.如果我可以通过编程方式更正用户的输入,我不会在乎.例如,用户输入的负号不在第一位置-使用JavaScript,从理论上说我可以删除它.
然而,这是明显的JavaScript行为:当输入元素时具有数字"属性,并且 value
是无效数字, Element.value
返回一个空字符串.这是非常棘手的程序验证:因为我们具有空字符串值,验证器将返回输入不得为空.请输入值."输入不为空时出错!
document.getElementById("target").addEventListener("input",blackbox => {console.log(document.getElementById("target").value);});
<输入类型="number" value =" id ="target">
如何获得实际的输入值?(如果您了解Vue,也请添加Vue的解决方案.)
尝试一下:
我只接受数字:< input type ="text" v-model ="form.availability" oninput ="this.value = this.value.replace(/[^ 0-9]/g,'');">< br>我只接受包含一点的数字:< input type ="text" v-model ="form.availability" oninput ="this.value = this.value.replace(/[^ 0-9.]/g,'').replace(/(\.. *)\ ./g,'$ 1');>< br>我接受负数,包括一点:< input type ="text" v-model ="form.availability" oninput ="this.value = this.value.replace(/[^ 0-9 .-]/g,'').replace(/(\ .. *)\ ./g,'$ 1');>< br>我接受负数,包括一点:< input type ="text" v-model ="form.availability" oninput ="this.value = this.value.replace(/[^ 0-9 .-]/g,'').replace(/(\ .. *)\ ./g,'$ 1').replace(/(\..*)\./g,'$ 1');>< br>我接受包括点在内的负数(只有一个减号"):< 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>我也接受"e"和"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>
不同的浏览器将输入类型编号"视为输入类型编号".不一样
From the MDN documentation about <input type="number">
:
They include built-in validation to reject non-numerical entries.
Does it mean "reject when try to submit the HTML form"? I inputted "4e4--23". HTML has not rejected it.
Therefore, <input type="number">
can not prevent the inputting of non-number value.
I don't care about I it if I can programically correct user's input.
For example, user inputted the minus sign not in the first position - using JavaScript, theoretically I can remove it.
However here is unobvious JavaScript behavior: when input element
has "number" attribute and value
is invalid number, Element.value
returns
an empty string. It's very tricky programmatic validation: because we
have empty string value, the validator will return "The input must not be empty. Please input the value." error while input in not empty!
document.getElementById("target").addEventListener("input", blackbox => {
console.log(document.getElementById("target").value);
});
<input type="number" value="" id="target">
How can I get the actual inputted value? (If you know Vue, please add the solution for Vue, too.)
try this:
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>
Different browsers treat the "input type number" differently
这篇关于<输入类型=“数字">不会阻止输入无效数字,而是"element.value".不允许我纠正它们的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!