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

打印页面