日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

 
 
 
 

  
  
  
  
 
  
  
  
  
Your email please:  
  
  
  
  
 
  
  
  
  
 
  
  
  
  

注：

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

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

三、focus/blur 方法

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

例：

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

 
 
 
 

  
  
  
  
 
  
  
  
  
Your email please:  
  
  
  
  
   
  
  
  
  
     
  
  
  
  
     
  
  
  
  
 
 
 
 
 

注：

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

四、focus/blur 委托

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

例如，不能把 onfocus放在

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

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

1. 方案一

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

2. 方案二

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

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

所以，這是另一個可行的變體：

一樣的結(jié)果：

五、總結(jié)

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

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

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

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