Js中的onblur和onfocus事件（圖文教學）

 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）即自身。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

程式碼詳解JavaScript如何實現快速排序

#JavaScript如何以封裝的方式實作冒泡排序

詳解JavaScript運作機制以及概念分析
#

以上是Js中的onblur和onfocus事件（圖文教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！