HTML - DOM 元素 focus() 方法

HTML DOM 中的 focus() 方法將焦點設定到特定的網頁元素，例如輸入欄位或按鈕。

語法

element.focus();

引數

此方法不接受任何引數。

返回值

它只是將焦點設定到指定的元素，而不返回任何內容。

HTML DOM 元素 'focus()' 方法示例

以下示例展示了 focus() 方法如何管理網頁上不同 HTML 元素的焦點。

使用 focus() 方法聚焦到輸入欄位

此示例重點介紹如何使用 'focus()' 方法將焦點設定到輸入欄位。頁面完全載入後，會在 ID 為 "myInput" 的輸入欄位上呼叫 focus() 方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Setting Focus to an Input Field</title>
</head>

<body>
    <h2 align = "center">HTML - DOM Element </h2>
    <h3 align = "center">focus() Method
    <br><br>Setting Focus to an Input Field
    </h3>
    <form onsubmit = "return false">
        <label for="username">
            Username:
        </label>
        <input type="text" 
                id="username" 
                name="username">
        <br><br>
        <button onclick="focusUsername()">
            Focus Username Field
        </button>
    </form>

    <script>
        function focusUsername() {
            var usernameInput = 
            document.getElementById('username');
            usernameInput.focus();
        }
    </script>
</body>

</html>

聚焦到第一個輸入欄位

在此示例中，focus() 方法在輸入欄位上呼叫。這確保了當單擊按鈕時，表單中的第一個輸入欄位將獲得焦點。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Focus on First Input Field Example
    </title>
</head>

<body>
    <h2>HTML - DOM Element focus() Method</h2>
    <h3>Focus on First Input Field Example</h3>
    <form>
        <label for="firstName">
            First Name:
        </label>
        <input type="text" 
                 id="firstName">
        <br><br>        
        <label for="lastName">
            Last Name:
        </label>
        <input type="text" 
            id="lastName">
        <br><br>        
        <label for="email">
            Email:
        </label>
        <input type="email" 
                 id="email">
        <br><br>        
        <button onclick="focusOnFirstInput()">
            Focus on First Input
        </button>
    </form>

    <script>
    function focusOnFirstInput() {
        // Get all input elements within the form
        const formInputs = 
        document.querySelectorAll('form input');
        // Focus on the first input element
        formInputs[0].focus();
    }
    </script>
</body>

</html>

聚焦到使用者輸入欄位

此示例在頁面載入完畢後自動將焦點設定到輸入欄位。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Auto Focus on Page Load</title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>focus() Method</h2> 
    <p>
        Focus on the input field when the page loads.
    </p>
    
    <label for="myInput">Input Field:</label>
    <input type="text" id="myInput">
    
    <script>
        document.addEventListener
        ('DOMContentLoaded', function() {
            // Focus on the input field with id 'myInput'
            document.getElementById('myInput').focus(); 
        });
    </script>
</body>

</html>

支援的瀏覽器

方法
focus()	是	是	是	是	是

html_dom_element_reference.htm

列印頁面