JavaScript onblur與onfocus事件詳解
html頁面中,諸如按鈕、文本框等可視元素都具有擁有和失去焦點的事件,這些事件在響應鼠標或鍵盤動作時都可激發預設的操作。本文以文本框獲得和失去焦點為例簡單講解onfocus和onblur的應用。
一. onfocus(獲得焦點事件)
當一個文本框獲得焦點時,它裡面的文本就像“好123”網站上的百度搜索輸入框那樣全部被自動選中,這樣的操作可以利用onfocus來實現。
以下的文本框,當鼠標指針移過去時,裡面的文字全部被選中:
請輸入網址
這是怎麼做的呢?看以下代碼及解釋:
<input type="text"name="url" value="http://www.gxblk.com" size="30"οnmοusemοve="this.focus();this.select();">
代碼裡,input標簽內嵌入瞭onmousemove(鼠標指針經過)事件的JS語句,其等號後面的this.focus()意為其自身獲得焦點;獲得焦點的標志是該文本框內將出現輸入光標,但要讓其內的文字全部被選中,我們還得用上this.select()語句,它的意思就是選中全部文本框裡的文字。
二. onblur(失去焦點事件)
我們經常會檢測文本框是否已經被正確輸入,檢測工作通常在用戶點擊瞭提交按鈕之後進行,事實上,利用控件失去焦點的時候,我們就可以實時進行這個檢測工作,這樣的話,onblur事件就派上用場瞭。
以下例子有四個文本框,如果還沒有任何單擊它們當中的任意一個的操作,那麼什麼事情也不會發生,但是,當你單擊瞭其中的任何一個使其擁有瞭焦點(輸入光標在裡面),如果什麼都沒有輸入並且單擊瞭別的地方令其失去焦點,就會彈出一個警告,試試看
姓名
性別
年齡
住址
以下是代碼和解釋:
表單代碼
<form name="blur_test"> <p>姓名 <input type="text" name="name"value="" size="30"οnblur="chkvalue(this)"><br> 性別 <inputtype="text" name="sex" value=""size="30" οnblur="chkvalue(this)"><br> 年齡 <inputtype="text" name="age" value=""size="30" οnblur="chkvalue(this)"><br> 住址 <inputtype="text" name="addr" value=""size="30" οnblur="chkvalue(this)"></p> </form>
JS代碼
<scriptlanguage="javascript"> function chkvalue(txt) { if(txt.value=="") alert("文本框裡必須填寫內容!"); } </script>
表單代碼裡,每一個方框框的代碼都嵌入一個onblur JS語句,它們都調用後面的JS代碼中的自定義函數chkvalue(this),意思是,當文本框失去焦點時就調用chkvalue()函數;這chkvalue()函數檢測文本框是否為空,如果是就彈出警告窗口。該函數有一個參數(txt),對應於前面文本框調用該函數的參數(this)即自身。
到此這篇關於JavaScript onblur與onfocus事件詳解的文章就介紹到這瞭,更多相關js onblur與onfocus事件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- JS實現點擊文本框改變背景顏色
- JavaScript實現表單元素的操作
- jQuery 表單事件與遍歷詳情
- HTML form表單提交方法案例詳解
- vue環境如何實現div focus blur焦點事件