<输入类型＝“数字">不会阻止输入无效数字，而是"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屋！