JavaScript onfocus 事件

JavaScript onfocus 事件是 JavaScript event 的其中一項,用來監聽某元素獲得使用者的聚焦,簡單來說就是當使用者的滑鼠游標移至被監聽的欄位,就屬於聚焦的情況,通常用在 textareainput text表單的文字輸入欄位,相對應的 event 是 onblur 事件,若要判斷使用者進入某個欄位,可以使用 onfocus event,若要判斷使用者離開某個欄位,則使用 onblur enent,所有的主流瀏覽器都支援 onfocus event。

JavaScript onfocus 基本語法

onfocus = "要觸發的 javascript function"


onfocus 與其他 event 類似,都是用來判斷使用者的行為,當 onfocus 判斷使用者聚焦到某個欄位,就會觸發特定的 JavaScript function 去執行該做的工作,若無法觸發 function 開始工作,則 onfocus 等於沒有意義。

JavaScript onfocus 事件範例
<script language="javascript">
function ShowFocus(){
    document.getElementById('ShowBox').innerHTML='欄位已經被 Focus';
}
</script>
請輸入您的名子:<input type="text" onfocus="ShowFocus()"> <span id="ShowBox"></span>
以上範例輸出
請輸入您的名子:
範例中的 input text 文字輸入欄位中,加入了 onfocus 的事件,當網友將滑鼠游標移至欄位內,就會被 onfocus 監聽到,並觸發 ShowFocus 函式進行顯示文字的工作,範例程式碼的文字輸入欄位後方有個 <span> 區域,是用來顯示文字用的,DOMdocument.getElementById 會透過 innerHTML 的方式,將文字填入 <span> 區域內。熟悉了 onfocus 的技巧之後,就可以設計出其他有趣的特效,例如更換背景顏色(background-color)、更換背景圖片(background-image)、跳出對話視窗 ... 等變化,也可以搭配 onblur 設計出失焦的效果。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C