使用数字输入,滑块不会让你超出最大值和最小值但是如果你输入一个超出最大值和最小值的数字,它仍然允许你这样做。有没有什么办法解决这一问题?
HTML:
<input id='age' type ='number' min="0" max='120'/> <br>
<label for 'weight'>Your weight:</label>
<input id='weight' type='number' min='0' max='3000'/> <br> <br>
这里的示例,关于从最大值和最小值中键入数字:http://jsbin.com/uwiMeZOq/6/edit
如果没有解决方案我可以使用其他类型的输入吗?
答案 0 :(得分:1)
它或多或少地按预期工作:用户可以键入任何输入,如果它不符合要求,则控件被视为无效。因此,表单提交将在支持浏览器时失败,并且元素与:invalid
选择器匹配,并且可以在JavaScript中分析情况。元素不意味着物理上阻止用户输入invali输入。为此,您需要JavaScript检查和合适的事件处理程序,基本上是onkeypress
和onpaste
。即使这样,用户也许可以通过某个用户界面输入无效数据。
input type=number
元素不适合输入,例如人的年龄或体重,它没有逻辑上限,通过输入一些数字而不是使用微调器几乎总是更容易输入。
更好的方法是使用input type=text
,可能使用pattern=\d+
。您可以运行单独的数据敏感性检查(使用JavaScript),上限稍微大一些,真正涵盖所有已知案例。