onfocus詳解

一、onfocus和focus區別

在HTML中，有一個焦點的概念。焦點是DOM中的一個特殊狀態，指的是用戶正在與之交互的元素。一個元素擁有焦點會將事件發送到這個元素，以便元素及其父級元素可以使用Javascript處理事件。在焦點移動時，會觸發focus和blur事件。

onfocus和focus是與焦點狀態相關的事件。當一個元素恢復焦點時，會觸發onfocus事件，從而執行相關的Javascript代碼。focus事件也是在元素獲取焦點時觸發的同一類事件。但是，onfocus是更加推薦使用的事件，因為它在綁定時支持addEventListener方法，並且它不能被取消，確保了事件的可靠性。

二、onfocus相關屬性和方法

1、document.activeElement

    function checkFocus(){
        console.log(document.activeElement.nodeName);
    }
    setInterval(checkFocus, 1000);

使用document.activeElement屬性可以獲取當前具有焦點的元素。在上面的代碼示例中，我們使用setInterval函數定時地檢查當前具有焦點的元素，並將其nodeName列印在控制台上。

2、element.onblur

    var input = document.getElementById("input1");
    input.onblur = function() {
        alert("Input失去焦點");
    };

在上述代碼示例中，我們為一個ID為「input1」的元素綁定了一個onblur事件，並在事件觸發時彈出一個警告框，表示焦點已經移離了該元素。

3、element.focus()

    function setFocus() {
        document.getElementById("input2").focus();
    }
    setInterval(setFocus, 5000);

在上面的代碼示例中，每隔5秒鐘我們都會調用一個名為setFocus()的函數。這個函數會將焦點設置在一個ID為「input2」的input元素上。在實際使用中，設置焦點可以用來在文本框、下拉框和單選框等元素上實現快速的鍵盤輸入。

三、onfocus常見應用場景

1、表單驗證

表單中的每個控制項都有一個屬性，名為required。當該屬性值設置為true時，表單提交中如果一個或多個該屬性為true的元素未被填充，那麼表單將不能進行提交。我們可以根據這個屬性值，使用onfocus事件，在用戶離開一個元素後執行表單驗證。

2、文本框搜索提示

在一個較大的文本框中，我們很難手動輸入一些關鍵字。搜索提示可以使得輸入文本更加方便，目前市面上已經有很多插件供開發者選擇。但是，如果不想使用插件，我們也可以使用onfocus事件實現文本框搜索提示。具體實現方法是，在文本框中加入一個默認值，當用戶開始輸入時，用Javascript判斷是否執行提示功能。

3、菜單選擇

在一個下拉菜單中選中一項時，會觸發onchange事件，但是在還沒有確定選擇時需要有更多的提示。我們可以使用onfocus事件在選擇項獲得焦點時，在其他地方進行提示，以幫助用戶更快速、更準確地選擇。例如，在一個省市區三級聯動的下拉菜單中，在選擇一個省份時，可以在頁面上動態顯示該省份的地圖或其他有關信息。