JS focus和blur事件：焦點處理

在 JavaScript 中，焦點處理主要包括獲取焦點（focus）和失去焦點（blur）事件型別。所謂焦點，就是啟用表單欄位，使其可以相應鍵盤事件。

focus

當單擊或使用 Tab 鍵切換到某個表單元素或超連結物件時，會觸發該事件。focus 事件是確定頁面內滑鼠當前定位的一種方式。在預設情況下，整個文件處於焦點狀態，但是單擊或使用 Tab 鍵可以改變焦點的位置。

blur

blur 事件型別表示在元素失去焦點時響應，它與 focus 事件型別是相對的，主要作用於表單元素和超連結物件。

【範例1】在下面範例中為所有輸入表單元素系結了 focus 和 blur 事件處理常式，設定當元素獲取焦點時呈凸起顯示，失去焦點時則顯示為預設的凹陷效果。

<input type="text" />
<input type="text" />
<script>
    var o = document.getElementsByTagName("input");  //獲取表單元素集合
    for (var i = 0; i < o.length; i ++ ) {  //遍歷所有表單元素
        o[i].onfocus = function () {  //註冊focus事件處理常式
            this.style.borderStyle = "outset";
        }
        o[i].blur = function () {  //註冊focus事件處理常式
            this.style.borderStyle = "inset";
        }
    }
</script>

每個表單欄位都有兩個方法：focus() 和 blur()，其中 focus() 方法用於設定表單欄位為焦點。

【範例2】在下面範例中設計在頁面載入完畢後將焦點轉移到表單中的第 1 個文字方塊欄位中，讓其準備接收使用者輸入。

<form id="myform" method="post" action="#">
    姓名<input type="text" name="name" /><br />
    密碼<input type="password" name="pass" /><br />
</form>
<script>
    var form = document.getElementById("myform");
    var field = form.elements["name"];
    window.onload = function () {
        field.focus();
    }
</script>

如果是隱藏欄位（<input type="hidden">）或者使用 CSS 的 display 和 visibility 隱藏欄位顯示，設定其獲取焦點將引發異常。

blur() 方法的作用時從元素中移走焦點。在呼叫 blur() 方法時，並不會把焦點轉移到某個特定的元素上，僅僅時將焦點移走。早期開發中有使用者使用 blur() 方法代替 readonly 屬性，建立唯讀欄位。