JavaScript:表單焦點/非焦點偵測變換圖片(可以做得很可愛的偵測特效!)

2018/12/29 91 網站技術 , HTML , JavaScript

因為做學校多媒體程式設計的前端介面,有機會做到登入畫面,突然想到過去有在其他網站看到欄位的焦點偵測特效,沒錯!這個網頁上方有個人物,當游標焦點在「密碼」時,那個人物就會遮眼,相當可愛!😍 於是我就靈機一動,想要嘗試看看做出這樣的效果,剛好運用這學期學到的 JavaScript 基礎功能就能偵測是否焦點,焦點時導入指定 CSS 顯示指定圖案(例如:人物躲起來、遮眼等),非焦點時就更改 CSS 顯示原本的圖案(正常的人物等),可以靠著自己的創意做出多種風格唷!😉 接著是程式碼與預覽的部分。

//密碼焦點更改上方圖示
function PW_Focus() {
document.getElementById('img').style.background = "url(https://i.imgur.com/NNsKwtp.png)";
}
//密碼非焦點更改上方圖示
function PW_Onblur() {
document.getElementById('img').style.background = "url(https://i.imgur.com/oIgBPWJ.png)";
}

以上是最主要的 JavaScript 程式,利用這兩個方法變換「img」的圖片,HTML 方面,只要在密碼欄位的標籤上加「onfocus="PW_Focus()"」和「onblur="PW_Onblur()"」,前者為焦點時呼叫「PW_Focus()」方法,後者為非焦點時呼叫「PW_Onblur()」方法。

以下提供範例網頁原始碼的截圖與預覽結果:

▲示範截圖。

▲示範結果。

贊助廣告 ‧ Sponsor advertisements
徵信社服務電話| 外遇疑雲| 阿宅來說徵信社故事| 如何手機監聽| 徵信社電話幾號| 徵信價目表費用| 抓姦在床蒐證| 台北立達徵信社| 免費法律諮詢專線| 馭夫術手段| 設計離婚服務| 男友感情挽回| 包二奶氾濫| 抓小三蒐證| 反跟蹤可行嗎| 尋人查址高手| 夫妻協議離婚| 委託外遇蒐證| 丈夫外遇偷腥| 名人外遇新聞| 立案專業徵信社| 婚前調查協助| 離婚扶養費| 汽車定位追蹤| 危險徵信社任務| 免費法律諮詢| 國際徵信公司|
【業界首推立達徵信FB