javascript處理焦點的方法:1、透過「field.focus();」方法取得焦點;2、透過「o[i].blur = function(){...}」方法處理失去焦點。
本文操作環境:windows7系統、javascript1.8.5版、DELL G3電腦
javascript如何處理焦點?
JavaScript焦點處理(取得焦點focus、失去焦點blur)
#焦點處理
焦點處理主要包含focus(取得焦點)和blur(失去焦點)事件類型。所謂焦點,就是啟動表單字段,使其可以回應鍵盤事件。
取得焦點:focus
當點擊或使用Tab鍵切換到某個表單元素或超連結物件時,會觸發該事件。 focus事件是確定頁面內滑鼠目前定位的一種方式。在預設情況下,整個文件處於焦點狀態,但是按一下或使用Tab鍵可以改變焦點位置。 '
範例:在頁面載入完畢後,將焦點轉移到表單中的第一個文字方塊字段,讓其準備接收使用者輸入
<form id="myform" method="post" action="#"> 姓名<input type="text" name="name"/><br> 密码<input type="password" name="pass" /></form> <script> var form = document.getElementById("myform"); var field = form.elements("name"); window.onload = function(){ field.focus(); } </scriipt>
失去焦點:blur
blur事件類型表示在元素失去焦點時回應,它與focus事件類型是對應的,主要作用於表單元素和超連結物件
範例:為所有輸入表單元素綁定了focus和blur事件處理函數,設定當元素獲取焦點時呈凸起,失去焦點呈凹陷
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" /> <input type="text" /> <script> var o = document.getElementsByTagName("input"); for(var i = 0; i < o.length; i++){ o[i].onfocus = function(){ this.style.borderStyle = "outset"; } o[i].blur = function(){ this.style.borderStyle = "inset"; } } </script> </body></html>
注意:如果時隱藏字段(),或使用CSS的display和visibility隱藏欄位顯示,設定其獲取焦點將引發異常。
推薦學習:《javascript基礎教學》
#以上是javascript如何處理焦點的詳細內容。更多資訊請關注PHP中文網其他相關文章!