盤點(diǎn)JavaScript focus/blur（聚焦）實(shí)際應(yīng)用
大家好，我進(jìn)階學(xué)習(xí)者。
一、前言
當(dāng)用戶點(diǎn)擊某個(gè)元素或使用鍵盤上的 Tab 鍵選中時(shí)，該元素將會(huì)獲得聚焦(focus)。當(dāng)網(wǎng)頁加載時(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事件。讓使用它們來校驗(yàn)一個(gè) input字段。
1. 案例分析
blur事件處理程序檢查這個(gè)字段是否輸入了電子郵箱，如果沒有輸入，則顯示一個(gè) error。
focus事件處理程序隱藏 error 信息(在blur事件處理程序上會(huì)被再檢查一遍)。
2. 代碼
- <style>
- .invalid { border-color: red; }
- #error { color: red }
- </style>
- Your email please:
- <input type="email" id="input">
- <div id="error">
- </div>
- <script>
- input.onblur = function() {
- if (!input.value.includes('@')) { // not email
- input.classList.add('invalid');
- error.innerHTML = 'Please enter a correct email.'
- }
- };
- input.onfocus = function() {
- if (this.classList.contains('invalid')) {
- // 移除 "error" 指示，因?yàn)橛脩粝胍匦螺斎胍恍﹥?nèi)容
- this.classList.remove('invalid');
- error.innerHTML = "";
- }
- };
- </script>
注：
現(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)。
例：
如果輸入值無效，可以讓焦點(diǎn)無法離開這個(gè) input字段：
- <body style="background-color: aqua;">
- Your email please:
- <input type="email" id="input">
- <input type="text" style="width:220px" placeholder="make email invalid and try to focus here">
- <script>
- input.onblur = function() {
- if (!this.value.includes('@')) { // not email
- // 顯示 error
- this.classList.add("error");
- // ...將焦點(diǎn)放回來
- input.focus();
- } else {
- this.classList.remove("error");
- }
- };
- </script>
- </body>
注：
如果在 input中輸入一些內(nèi)容，然后嘗試使用 Tab 鍵或點(diǎn)擊遠(yuǎn)離 <input>的位置，那么 onblur事件處理程序會(huì)把焦點(diǎn)重新設(shè)置到這個(gè) input字段上。
四、focus/blur 委托
focus和blur事件不會(huì)向上冒泡。
例如，不能把 onfocus放在 <form>上來對(duì)其進(jìn)行高亮，像這樣：
- <!-- on focusing in the form -- add the class -->
- <form onfocus="this.className='focused'">
- <input type="text" name="name" value="Name">
- <input type="text" name="surname" value="Surname">
- </form>
- <style>
- .focused {
- outline: 1px solid red;
- }
- </style>
當(dāng)用戶聚焦于 <input>時(shí)，focus事件只會(huì)在該 <input>上觸發(fā)。它不會(huì)向上冒泡。所以 form.onfocus永遠(yuǎn)不會(huì)觸發(fā)。
form.onfocus永遠(yuǎn)不會(huì)觸發(fā)，(兩個(gè)解決方案)。
1. 方案一
有一個(gè)遺留下來的有趣的特性(feature)：focus/blur不會(huì)向上冒泡，但會(huì)在捕獲階段向下傳播。
- <form id="form">
- <input type="text" name="name" value="Name">
- <input type="text" name="surname" value="Surname">
- </form>
- <style>
- .focused {
- outline: 1px solid red;
- }
- </style>
- <script>
- // 將處理程序置于捕獲階段（最后一個(gè)參數(shù)為 true）
- form.addEventListener("focus", () => form.classList.add('focused'), true);
- form.addEventListener("blur", () => form.classList.remove('focused'), true);
- </script>
2. 方案二
可以使用 focusin和 focusout事件 —— 與 focus/blur事件完全一樣，只是它們會(huì)冒泡。
注意：必須使用 elem.addEventListener來分配它們，而不是 on<event>。
所以，這是另一個(gè)可行的變體：
- <form id="form">
- <input type="text" name="name" value="Name">
- <input type="text" name="surname" value="Surname">
- </form>
- <style>
- .focused {
- outline: 1px solid red;
- }
- </style>
- <script>
- form.addEventListener("focusin", () => form.classList.add('focused'));
- form.addEventListener("focusout", () => form.classList.remove('focused'));
- </script>
一樣的結(jié)果：
五、總結(jié)
本文基于JavaScript基礎(chǔ)，介紹了focus/blur(聚焦)實(shí)際應(yīng)用。通過事件以及對(duì)方法的講解。在元素獲得/失去焦點(diǎn)時(shí)會(huì)觸發(fā) focus和 blur事件，通過 document.activeElement來獲取當(dāng)前所聚焦的元素。focus/blur 委托時(shí)遇到的問題，提供了兩個(gè)有效的解決方案。
歡迎大家積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來很簡(jiǎn)單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。
通過代碼的演示，運(yùn)行效果圖的展示，能夠讓讀者更直觀的理解，更好的學(xué)習(xí)。
代碼很簡(jiǎn)單，希望能夠幫助你更好的學(xué)習(xí)。
