HTML5的发布带来了众多新控件,如邮箱、数字、网址输入框等,极大简化了开发流程。这些控件内置多种功能,开发者只需调用并进行简单配置即可使用,显著提升了开发效率与用户体验。
1、 查看代码,我们定义了一个 type 为 number 的输入框控件,所示,其最小值设为 5,最大值设为 10。
2、 运行页面查看效果,输入6后数据正常,未出现任何错误提示。
3、 当输入数字2时,系统会弹出错误提示。由于我的操作系统为英文版,因此显示的是英文错误信息;若使用中文系统,则会显示相应的中文错误提示内容。
4、 如何自定义英文或中文的错误提示信息,避免使用系统默认的显示内容?
5、 可添加脚本代码进行自定义,具体所示。
6、 当用户在输入框中输入内容后鼠标移出,便会触发onblur方法,用于执行相应的处理逻辑。
7、 通过id为txtSc的元素获取数字输入框,获取后判断其输入值是否小于最小值。若小于最小值,则rangeUnderflow属性为true,此时将自定义错误提示信息设置为:最小值必须是5啊!!!以提醒用户输入符合要求的数值。
8、 所示,当前已成功显示自定义的提示信息。
9、 当输入数字为20时,已超出最大值限制,但提示信息仍显示为原始内容,未作相应更新。
10、 修改代码所示,若有新数据输入,优先清空自定义信息。
11、 再次运行查看,所示,当输入数字超过最大值时,将显示默认提示信息,不再受自定义的最小值错误提示影响。
12、 当数值超过上限时,可通过添加代码自定义错误提示信息,具体方法所示。
13、 运行后查看效果,所示,错误提示为我们自定义的内容。
