如何发布网络小说,手机推荐排行榜

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

盤點(diǎn)JavaScriptfocus/blur（聚焦）實(shí)際應(yīng)用

[[414324]]

成都創(chuàng)新互聯(lián)，專注為中小企業(yè)提供官網(wǎng)建設(shè)、營(yíng)銷型網(wǎng)站制作、響應(yīng)式網(wǎng)站設(shè)計(jì)、展示型網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)等服務(wù)，幫助中小企業(yè)通過(guò)網(wǎng)站體現(xiàn)價(jià)值、有效益。幫助企業(yè)快速建站、解決網(wǎng)站建設(shè)與網(wǎng)站營(yíng)銷推廣問(wèn)題。

大家好，我進(jìn)階學(xué)習(xí)者。

一、前言

當(dāng)用戶點(diǎn)擊某個(gè)元素或使用鍵盤上的 Tab 鍵選中時(shí)，該元素將會(huì)獲得聚焦(focus)。當(dāng)網(wǎng)頁(yè)加載時(shí)，HTML-特性(attribute)。

autofocus也可以讓一個(gè)焦點(diǎn)落在元素上，不僅如此，還有其它途徑可以獲得焦點(diǎn)。

二、focus/blur 事件

當(dāng)元素聚焦時(shí)，會(huì)觸發(fā) focus事件，當(dāng)元素失去焦點(diǎn)時(shí)，會(huì)觸發(fā) blur事件。讓使用它們來(lái)校驗(yàn)一個(gè) input字段。

1. 案例分析

blur事件處理程序檢查這個(gè)字段是否輸入了電子郵箱，如果沒有輸入，則顯示一個(gè) error。

focus事件處理程序隱藏 error 信息(在blur事件處理程序上會(huì)被再檢查一遍)。

2. 代碼

 
 
 
 
  
  
  
     
  
  
  Your email please:

注：

現(xiàn)代 HTML 允許使用 input特性(attribute)，進(jìn)行許多驗(yàn)證：required，pattern等。

有時(shí)它們正是所需要的。當(dāng)需要更大的靈活性時(shí)，可以使用 JavaScript。如果數(shù)據(jù)是正確的，可以把它自動(dòng)發(fā)送到服務(wù)器。

三、focus/blur 方法

elem.focus()和 elem.blur()方法可以設(shè)置和移除元素上的焦點(diǎn)。

例：

如果輸入值無(wú)效，可以讓焦點(diǎn)無(wú)法離開這個(gè) input字段：

 
 
 
 
  
  
  
     
  
  
  Your email please:

注：

如果在 input中輸入一些內(nèi)容，然后嘗試使用 Tab 鍵或點(diǎn)擊遠(yuǎn)離的位置，那么 onblur事件處理程序會(huì)把焦點(diǎn)重新設(shè)置到這個(gè) input字段上。

四、focus/blur 委托

focus和blur事件不會(huì)向上冒泡。

例如，不能把 onfocus放在

上來(lái)對(duì)其進(jìn)行高亮，像這樣：

當(dāng)用戶聚焦于時(shí)，focus事件只會(huì)在該上觸發(fā)。它不會(huì)向上冒泡。所以 form.onfocus永遠(yuǎn)不會(huì)觸發(fā)。

form.onfocus永遠(yuǎn)不會(huì)觸發(fā)，(兩個(gè)解決方案)。

1. 方案一

有一個(gè)遺留下來(lái)的有趣的特性(feature)：focus/blur不會(huì)向上冒泡，但會(huì)在捕獲階段向下傳播。

2. 方案二

可以使用 focusin和 focusout事件 —— 與 focus/blur事件完全一樣，只是它們會(huì)冒泡。

注意：必須使用 elem.addEventListener來(lái)分配它們，而不是 on。

所以，這是另一個(gè)可行的變體：

一樣的結(jié)果：

五、總結(jié)

本文基于JavaScript基礎(chǔ)，介紹了focus/blur(聚焦)實(shí)際應(yīng)用。通過(guò)事件以及對(duì)方法的講解。在元素獲得/失去焦點(diǎn)時(shí)會(huì)觸發(fā) focus和 blur事件，通過(guò) document.activeElement來(lái)獲取當(dāng)前所聚焦的元素。focus/blur 委托時(shí)遇到的問(wèn)題，提供了兩個(gè)有效的解決方案。

歡迎大家積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問(wèn)題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。

通過(guò)代碼的演示，運(yùn)行效果圖的展示，能夠讓讀者更直觀的理解，更好的學(xué)習(xí)。

代碼很簡(jiǎn)單，希望能夠幫助你更好的學(xué)習(xí)。

文章名稱：盤點(diǎn)JavaScriptfocus/blur（聚焦）實(shí)際應(yīng)用
文章轉(zhuǎn)載：http://m.fisionsoft.com.cn/article/cdhiohg.html

新聞中心

一、前言

二、focus/blur 事件