JS: 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>
    性別 <input type="text" name="sex" value="" size="30" onblur="chkvalue(this)"><br>
    年齡 <input type="text" name="age" value="" size="30" onblur="chkvalue(this)"><br>
    住址 <input type="text" name="addr" value="" size="30" onblur="chkvalue(this)"></p>
</form>

JS代碼——

<script language="javascript">

function chkvalue(txt) {
    if(txt.value=="") alert("文字框裡必須填寫內容!");
}

</script>

解釋——

表單代碼裡，每一個方框框的代碼都嵌入一個onblur JS語句，它們都調用後面的JS代碼中的自訂函數chkvalue(this)，意思是，當文字框失去焦點時就調用chkvalue()函數；這chkvalue()函數檢測文字框是否為空白，如果是就彈出警告視窗。該函數有一個參數（txt），對應於前面文字框調用該函數的參數（this）即自身。