對標蘋果的靈動島 華為帶來實況窗功能
繼蘋果的靈動島之后，華為也在今天正式推出了“實況窗”功能。據(jù)今天鴻蒙OS 4.0的現(xiàn)場演示顯示，華為的實況窗可以更高效的展現(xiàn)出實時通知，比如鎖屏上就能看到外賣、打車、銀行
當用戶點擊某個元素或使用鍵盤上的 Tab 鍵選中時，該元素將會獲得聚焦（focus）。當網(wǎng)頁加載時，HTML-特性（attribute）。
autofocus也可以讓一個焦點落在元素上，不僅如此，還有其它途徑可以獲得焦點。
當元素聚焦時，會觸發(fā) focus事件，當元素失去焦點時，會觸發(fā) blur事件。讓使用它們來校驗一個 input字段。
blur事件處理程序檢查這個字段是否輸入了電子郵箱，如果沒有輸入，則顯示一個 error。
focus事件處理程序隱藏 error 信息（在blur事件處理程序上會被再檢查一遍）。
<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" 指示，因為用戶想要重新輸入一些內容 this.classList.remove('invalid'); error.innerHTML = ""; }};</script>
注：
現(xiàn)代 HTML 允許使用 input特性（attribute），進行許多驗證：required，pattern等。
有時它們正是所需要的。當需要更大的靈活性時，可以使用 JavaScript。如果數(shù)據(jù)是正確的，可以把它自動發(fā)送到服務器。
elem.focus()和 elem.blur()方法可以設置和移除元素上的焦點。
例：
如果輸入值無效，可以讓焦點無法離開這個 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"); // ...將焦點放回來 input.focus(); } else { this.classList.remove("error"); } };</script></body>
注：
如果在 input中輸入一些內容，然后嘗試使用 Tab 鍵或點擊遠離 <input>的位置，那么 onblur事件處理程序會把焦點重新設置到這個 input字段上。
例如，不能把 onfocus放在 <form>上來對其進行高亮，像這樣：
<!-- 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>當用戶聚焦于 <input>時，focus事件只會在該 <input>上觸發(fā)。它不會向上冒泡。所以 form.onfocus永遠不會觸發(fā)。
form.onfocus永遠不會觸發(fā)，（兩個解決方案）。
有一個遺留下來的有趣的特性（feature）：focus/blur不會向上冒泡，但會在捕獲階段向下傳播。
<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> // 將處理程序置于捕獲階段（最后一個參數(shù)為 true） form.addEventListener("focus", () => form.classList.add('focused'), true); form.addEventListener("blur", () => form.classList.remove('focused'), true);</script>可以使用 focusin和 focusout事件 —— 與 focus/blur事件完全一樣，只是它們會冒泡。
注意：必須使用 elem.addEventListener來分配它們，而不是 on<event>。
所以，這是另一個可行的變體：
<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>一樣的結果：
本文基于JavaScript基礎，介紹了focus/blur（聚焦）實際應用。通過事件以及對方法的講解。在元素獲得/失去焦點時會觸發(fā) focus和 blur事件，通過 document.activeElement來獲取當前所聚焦的元素。focus/blur 委托時遇到的問題，提供了兩個有效的解決方案。
歡迎大家積極嘗試，有時候看到別人實現(xiàn)起來很簡單，但是到自己動手實現(xiàn)的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。
通過代碼的演示，運行效果圖的展示，能夠讓讀者更直觀的理解，更好的學習。
代碼很簡單，希望能夠幫助你更好的學習。
本文鏈接：http://m.www897cc.com/showinfo-26-95545-0.html盤點JavaScript focus/blur（聚焦）實際應用
聲明：本網(wǎng)頁內容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號