这是我参与2022首次更文挑战的第9天,活动详情查看:2022首次更文挑战
表单的方法
我们使用表单的时候,我们会发现每个表单字段都会有两个公共的方法,分别是focus和blur,其中focus方法就是把浏览器焦点设置到表单字段。比如我们可以在输入的文本框中进行聚焦效果,用来表示可以输入内容。这个方法主要的作用就是让用户对某个部分引起注意。在html5中浏览器支持自动聚焦功能,可以使用autofocus属性。其中autofocus是布尔值属性。而focus对应的就是blur。blur就是从元素上移除焦点。除此之外还有change方法。change会因控件不同而在不同的时候触发,而blur和focus事件则会因为手动改变字段焦点或者调用自己的方法而进行触发。当我们想要给输入框增加背景颜色,可以使用focus聚焦功能,而如果我们想要去除背景颜色,可以使用blur方法。
<input type="text" autofocus>
过滤
过滤功能是我们平时工作中用到比较多的地方。当我们在输入框中不想让用户输入数字、字母一类的特定字符。例如下面的代码会屏蔽所有按键的输入。IE在处理剪贴板相关事件有很多,其中有cut表示剪切操作发生时触发。beforecut表示用剪切操作发生前触发。beforecopy表示复制操作发生前触发。copy表示复制操作发生时触发。paste表示粘贴操作发生时触发。beforepaste表示粘贴操作发生前触发。
zss.addEventListener("keypress", (event) => {
event.preventDefault();
});
自动切换
tabForward函数是实现自动切换的关键,我们可以通过maxlength来比较用户是否输入的文本长度大于我们设置的最大长度。
当我们想要表单必填时,可以使用required属性。当我们想要输入的文本匹配电子邮件地址可以使用email。我们还可以使用min和max来定义最小值和最大值,从而确定输入框输入数据的范围。我们还可以使用checkValidity方法去检测表单中任意给定字段是否有效,返回值为Boolean值,而且对任何表单元素都可以使用。我们还可以使用validity属性来检查表单字段的有效性。如果我们想要禁用对表单的任何验证可以使用novalidate属性。如果设置为true表示属性存在,如果设置为false表示属性不存在。
<input type="email" name="email">