目前我有以下代码
<input type="number" />
结果是这样的
右边的选择器允许数字变为负数。我该如何预防呢?
我对使用type="number"有疑问,它造成的问题比它解决的要多,我无论如何都要检查它,所以我应该回到使用type="text"吗?
目前我有以下代码
<input type="number" />
结果是这样的
右边的选择器允许数字变为负数。我该如何预防呢?
我对使用type="number"有疑问,它造成的问题比它解决的要多,我无论如何都要检查它,所以我应该回到使用type="text"吗?
当前回答
这取决于你想要的是int还是float字段。下面是这两款游戏的外观:
<input type="number" name="int-field" id="int-field" placeholder="positive int" min="1" step="1">
<input type="number" name="float-field" id="float-field" placeholder="positive float" min="0">
int字段附加了正确的验证,因为它的最小值是1。然而,float字段接受0;为了解决这个问题,你可以添加一个约束验证器:
function checkIsPositive(e) {
const value = parseFloat(e.target.value);
if (e.target.value === "" || value > 0) {
e.target.setCustomValidity("");
} else {
e.target.setCustomValidity("Please select a value that is greater than 0.");
}
}
document.getElementById("float-field").addEventListener("input", checkIsPositive, false);
JSFiddle这里。
注意,这些解决方案都不能完全阻止用户尝试输入无效的输入,但是您可以调用checkValidity或reportValidity来确定用户是否输入了有效的输入。
当然,您仍然应该进行服务器端验证,因为用户总是可以忽略客户端验证。
其他回答
我认为使用类型文本是最好的,而不是数字,因为使用类型=数字,你将面临一些问题,如输入字段的方向键和上、下键的值变化。
<input type="text" onkeypress="return event.charCode>=48 && event.charCode<=57" />
<输入类型=“数字” 分钟=“1” 步数=“1”>
这取决于你想要的是int还是float字段。下面是这两款游戏的外观:
<input type="number" name="int-field" id="int-field" placeholder="positive int" min="1" step="1">
<input type="number" name="float-field" id="float-field" placeholder="positive float" min="0">
int字段附加了正确的验证,因为它的最小值是1。然而,float字段接受0;为了解决这个问题,你可以添加一个约束验证器:
function checkIsPositive(e) {
const value = parseFloat(e.target.value);
if (e.target.value === "" || value > 0) {
e.target.setCustomValidity("");
} else {
e.target.setCustomValidity("Please select a value that is greater than 0.");
}
}
document.getElementById("float-field").addEventListener("input", checkIsPositive, false);
JSFiddle这里。
注意,这些解决方案都不能完全阻止用户尝试输入无效的输入,但是您可以调用checkValidity或reportValidity来确定用户是否输入了有效的输入。
当然,您仍然应该进行服务器端验证,因为用户总是可以忽略客户端验证。
Try
<input type="number" pattern="^[0-9]" title= " Only number" min="1" step="1">
尝试这个选项,并给出最小值和最大值
<输入类型=“数字” 模式=“\d+” 输入模式=“数字” 值=“123” 自动完成=“关闭” 最大长度=“5” 步骤=“1” min=“0” max=“99999” >