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