Js中的onblur和onfocus事件

weixin_33831673發表於2013-06-27

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

一. onfocus(獲得焦點事件)

當一個文字框獲得焦點時,它裡面的文字就像“好123”網站上的百度搜尋輸入框那樣全部被自動選中,這樣的操作可以利用onfocus來實現。

以下的文字框,當滑鼠指標移過去時,裡面的文字全部被選中:

請輸入網址

這是怎麼做的呢?看以下程式碼及解釋:

<input type="text"name="url" value="http://www.gxblk.com" size="30"onmousemove="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"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("文字框裡必須填寫內容!");

}

 

</script>

        表單程式碼裡,每一個方框框的程式碼都嵌入一個onblur JS語句,它們都呼叫後面的JS程式碼中的自定義函式chkvalue(this),意思是,當文字框失去焦點時就呼叫chkvalue()函式;這chkvalue()函式檢測文字框是否為空,如果是就彈出警告視窗。該函式有一個引數(txt),對應於前面文字框呼叫該函式的引數(this)即自身。

相關文章