html頁面中,諸如按鈕、文字方塊等視覺元素都具有擁有和失去焦點的事件,這些事件在回應滑鼠或鍵盤動作時都可激發預設的操作。本文以文字方塊獲得和失去焦點為例簡單講解onfocus和onblur的應用。
一. onfocus(獲得焦點事件)
當一個文字方塊獲得焦點時,它裡面的文字就像「好123」網站上的百度搜尋輸入框那樣全部被自動選中,這樣的操作可以利用onfocus來實現。
以下的文字框,當滑鼠指標移過去時,裡面的文字全部被選取:
請輸入網址
這是怎麼做的呢?看以下程式碼與解釋:
程式碼裡,input標籤內嵌入了onmousemove(滑鼠指標經過)事件的JS語句,其等號後面的this.focus()意為其自身獲得焦點;獲得焦點的標誌是該文字方塊內將出現輸入遊標,但要讓其內的文字全部被選中,我們還得用上this.select()語句,它的意思就是選中全部文字方塊裡的文字。
二. onblur(失去焦點事件)
我們經常會檢測文本框是否已經被正確輸入,檢測工作通常在用戶點擊了提交按鈕之後進行,事實上,利用控制失去焦點的時候,我們就可以即時進行這個偵測工作,這樣的話,onblur事件就派上用場了。
以下例子有四個文字框,如果還沒有任何單擊它們當中的任意一個的操作,那麼什麼事情也不會發生,但是,當你單擊了其中的任何一個使其擁有了焦點(輸入遊標在裡面),如果什麼都沒有輸入並且點擊了別的地方令其失去焦點,就會彈出一個警告,試試看
姓名
性別
年齡
住址
以下是代碼和解釋:
表單代碼