Js中的onblur和onfocus事件應用介紹

更新時間：2013年08月27日 16:03:16 作者：

html頁面中，諸如按鈕、文本框等可視元素都具有擁有和失去焦點的事件，本文以文本框獲得和失去焦點為例簡單講解onfocus和onblur的應用

html頁面中，諸如按鈕、文本框等可視元素都具有擁有和失去焦點的事件，這些事件在響應鼠標或鍵盤動作時都可激發(fā)預設的操作。本文以文本框獲得和失去焦點為例簡單講解onfocus和onblur的應用。

一. onfocus（獲得焦點事件）
當一個文本框獲得焦點時，它里面的文本就像“好123”網(wǎng)站上的百度搜索輸入框那樣全部被自動選中，這樣的操作可以利用onfocus來實現(xiàn)。
以下的文本框，當鼠標指針移過去時，里面的文字全部被選中：
請輸入網(wǎng)址
這是怎么做的呢？看以下代碼及解釋：
<input type="text"name="url" value="http://www.gxblk.com" size="30"onmousemove="this.focus();this.select();">
代碼里，input標簽內(nèi)嵌入了onmousemove（鼠標指針經(jīng)過）事件的JS語句，其等號后面的this.focus()意為其自身獲得焦點；獲得焦點的標志是該文本框內(nèi)將出現(xiàn)輸入光標，但要讓其內(nèi)的文字全部被選中，我們還得用上this.select()語句，它的意思就是選中全部文本框里的文字。

二. onblur（失去焦點事件）
我們經(jīng)常會檢測文本框是否已經(jīng)被正確輸入，檢測工作通常在用戶點擊了提交按鈕之后進行，事實上，利用控件失去焦點的時候，我們就可以實時進行這個檢測工作，這樣的話，onblur事件就派上用場了。
以下例子有四個文本框，如果還沒有任何單擊它們當中的任意一個的操作，那么什么事情也不會發(fā)生，但是，當你單擊了其中的任何一個使其擁有了焦點（輸入光標在里面），如果什么都沒有輸入并且單擊了別的地方令其失去焦點，就會彈出一個警告，試試看
姓名
性別
年齡
住址

以下是代碼和解釋：
表單代碼

復制代碼代碼如下:

 
<form name="blur_test"> 
<p>姓名 <input type="text" name="name"value="" size="30"onblur="chkvalue(this)"><br> 
性別 <inputtype="text" name="sex" value=""size="30" onblur="chkvalue(this)"><br> 
年齡 <inputtype="text" name="age" value=""size="30" onblur="chkvalue(this)"><br> 
住址 <inputtype="text" name="addr" value=""size="30" onblur="chkvalue(this)"></p> 
</form> 

JS代碼

復制代碼代碼如下:

 
<scriptlanguage="javascript"> 
function chkvalue(txt) { 
if(txt.value=="") alert("文本框里必須填寫內(nèi)容!"); 
} 
</script> 

表單代碼里，每一個方框框的代碼都嵌入一個onblur JS語句，它們都調(diào)用后面的JS代碼中的自定義函數(shù)chkvalue(this)，意思是，當文本框失去焦點時就調(diào)用chkvalue()函數(shù)；這chkvalue()函數(shù)檢測文本框是否為空，如果是就彈出警告窗口。該函數(shù)有一個參數(shù)（txt），對應于前面文本框調(diào)用該函數(shù)的參數(shù)（this）即自身。

您可能感興趣的文章: