盘点JavaScriptfocus/blur（聚焦）实际应用

[[414324]]

成都创新互联，专注为中小企业提供官网建设、营销型网站制作、响应式网站设计、展示型网站建设、网站设计等服务，帮助中小企业通过网站体现价值、有效益。帮助企业快速建站、解决网站建设与网站营销推广问题。

大家好，我进阶学习者。

一、前言

当用户点击某个元素或使用键盘上的 Tab 键选中时，该元素将会获得聚焦(focus)。当网页加载时，HTML-特性(attribute)。

autofocus也可以让一个焦点落在元素上，不仅如此，还有其它途径可以获得焦点。

二、focus/blur 事件

当元素聚焦时，会触发 focus事件，当元素失去焦点时，会触发 blur事件。让使用它们来校验一个 input字段。

1. 案例分析

blur事件处理程序检查这个字段是否输入了电子邮箱，如果没有输入，则显示一个 error。

focus事件处理程序隐藏 error 信息(在blur事件处理程序上会被再检查一遍)。

2. 代码

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2. Your email please:  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.  
    5.
 
  •  

    • 注：

    现代 HTML 允许使用 input特性(attribute)，进行许多验证：required，pattern等。

    有时它们正是所需要的。当需要更大的灵活性时，可以使用 JavaScript。如果数据是正确的，可以把它自动发送到服务器。

    三、focus/blur 方法

    elem.focus()和 elem.blur()方法可以设置和移除元素上的焦点。

    例：

    如果输入值无效，可以让焦点无法离开这个 input字段：

     
 
 
 
      
  
  
  
  
    1.  
      2.   
  
  
  
    2. Your email please:  
      3.   
  
  
  
    3.    
      4.   
  
  
  
    4.      
      5.   
  
  
  
    5.      
      6.   
  
  
  
    6.  
      7.

    注：

    如果在 input中输入一些内容，然后尝试使用 Tab 键或点击远离 的位置，那么 onblur事件处理程序会把焦点重新设置到这个 input字段上。

    四、focus/blur 委托

    focus和blur事件不会向上冒泡。

    例如，不能把 onfocus放在

    上来对其进行高亮，像这样：

     
 
 
 
      
  
  
  
  
    1.  
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3.    
      4.   
  
  
  
    4.    
      5.   
  
  
  
    5.    
  
  
  
    6.  
      7.

    当用户聚焦于 时，focus事件只会在该 上触发。它不会向上冒泡。所以 form.onfocus永远不会触发。

    form.onfocus永远不会触发，(两个解决方案)。

    1. 方案一

    有一个遗留下来的有趣的特性(feature)：focus/blur不会向上冒泡，但会在捕获阶段向下传播。

     
 
 
 
      
  
  
  
  
    1.  
      2.   
  
  
  
    2.    
      3.   
  
  
  
    3.    
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5.  
      6.   
  
  
  
    6.  
      7.

    2. 方案二

    可以使用 focusin和 focusout事件 —— 与 focus/blur事件完全一样，只是它们会冒泡。

    注意：必须使用 elem.addEventListener来分配它们，而不是 on。

    所以，这是另一个可行的变体：

     
 
 
 
      
  
  
  
  
    1.  
      2.   
  
  
  
    2.    
      3.   
  
  
  
    3.    
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5.  
      6.   
  
  
  
    6.  
      7.

    一样的结果：

    五、总结

    本文基于JavaScript基础，介绍了focus/blur(聚焦)实际应用。通过事件以及对方法的讲解。在元素获得/失去焦点时会触发 focus和 blur事件，通过 document.activeElement来获取当前所聚焦的元素。focus/blur 委托时遇到的问题，提供了两个有效的解决方案。

    欢迎大家积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。

    通过代码的演示，运行效果图的展示，能够让读者更直观的理解，更好的学习。

    代码很简单，希望能够帮助你更好的学习。

     

    名称栏目：盘点JavaScriptfocus/blur（聚焦）实际应用
    网页路径：http://www.shufengxianlan.com/qtweb/news17/4067.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    Google知识

    同城分类信息

    机柜租用　　 　云主机　　 　成都响应式网站建设　　 　和正兴机械　　 　宣传册设计　　 　移动网站建设　　 　广安网站建设　　 　成都关键词SEO优化　　 　成都网站排名　　 　高端网站建设　　 　app开发　　 　成都定制网站　　 　电商网店　　 　双流做网站　　 　雕琢时光　　 　重庆网站建设　　 　手机APP开发　　 　航龙航空　　 　腾讯免备案主机　　 　泸州洋跃建站