盘点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委托中遇到的问题，有两种有效的解决方案。欢迎大家积极尝试。有时候看别人实现很简单，但是到了自己实现的时候，总会出现各种各样的问题。不要野心太大，努力理解得更深刻。通过代码的演示和运行效果图的展示，可以让读者更直观的理解，更好的学习。代码很简单，希望能帮助大家更好的学习。

上一篇：裁员真的能拯救中国互联网吗？

下一篇：将音频编解码器添加到嵌入式系统的五个技巧

盘点JavaScriptfocus-blur（焦点）实战应用相关文章