当前位置: 首页 > 科技观察

盘点JavaScriptfocus-blur(焦点)实战应用

时间:2023-03-19 14:46:51 科技观察

大家好,我是进阶学习者。1.前言当用户点击一个元素或使用键盘上的Tab键选择它时,该元素将获得焦点。网页加载时的HTML属性。autofocus也可以让焦点落在元素上,不仅如此,还有其他方法可以获得焦点。2.focus/blur事件当元素获得焦点时,会触发focus事件,当元素失去焦点时,会触发blur事件。让我们使用它们来验证输入字段。1.案例研究blur事件处理程序检查是否在此字段中输入了电子邮件地址,如果没有则显示错误。focus事件处理程序隐藏了错误消息(在blur事件处理程序上进行了双重检查)。2.代码Youremailplease:

注意:现代HTML允许使用输入属性(attribute),许多验证:required、pattern等。有时它们正是需要的。当需要更大的灵活性时,可以使用JavaScript。如果数据正确,可以自动发送给服务器。3.focus/blur方法elem.focus()和elem.blur()方法可以设置和移除元素上的焦点。示例:如果输入值无效,可以使焦点无法离开输入域:Youremailplease:注意:如果在输入中键入内容,然后尝试Tab键或单击远离,onblur事件处理程序会将焦点重置到输入字段。四、focus/blur委托focus和blur事件不会冒泡。例如,您不能将onfocus放在
上以突出显示它,如下所示:当用户聚焦时在上时,焦点事件只会在该上触发。它不会起泡。所以form.onfocus永远不会触发。form.onfocus从不触发,(两种解决方案)。1.方案1有一个有趣的遗留特性(feature):focus/blur不会向上冒泡,而是会在capture阶段向下传播。2.方案2可以使用focusin和focusout事件——与focus/blur事件完全一样,只是冒泡了。注意:它们必须使用elem.addEventListener分配,而不是on。因此,这是另一个有效的变体:相同的结果:5.总结本文基于JavaScript基础,介绍focus/blur的实际应用.通过事件和方法的解释。focus和blur事件在元素获得/失去焦点时触发,当前获得焦点的元素是通过document.activeElement获取的。对于focus/blur委托中遇到的问题,有两种有效的解决方案。欢迎大家积极尝试。有时候看别人实现很简单,但是到了自己实现的时候,总会出现各种各样的问题。不要野心太大,努力理解得更深刻。通过代码的演示和运行效果图的展示,可以让读者更直观的理解,更好的学习。代码很简单,希望能帮助大家更好的学习。