极客教程如何在HTML页面加载时聚焦元素？
超文本标记语言 （HTML）是构建Web页面的基本组成部分，它定义了页面的结构。浏览器使用这种标记语言来操作文本、图片和其他内容的数据，以便以所需的格式显示。
超文本 是指连接Web页面的链接， 标记 定义了标签内的文本内容。
如何在HTML页面加载时聚焦元素？
我们希望在加载页面时，某个元素应该处于焦点状态。我们可以用 2种方法 实现：
- 使用自动聚焦属性 。
- 使用 window:load事件 。
让我们通过示例来探索这两种方法。
1. 使用自动聚焦属性
自动聚焦属性 是一个 布尔 属性，即它只能是true或false。当此属性存在于元素内部时，它指定该元素在页面加载时应自动获得焦点。
自动聚焦属性 只能在以下元素内使用：
<input><button><textarea><select>语法：
<elementName autofocus>
示例： 在这个示例中，每当页面加载时，输入元素获取焦点，并且我们可以通过输入的背景色改变为#8ecae6来看到它。
HTML
<!DOCTYPE html>
<html>
<head>
<title>Using autofocus attribute</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<p>GeeksforGeeks</p>
<input type="text" placeholder=
"Hey Geeks, Type something here"
autofocus>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
margin: auto;
margin-top: 10px;
height: 100px;
width: 300px;
background-color: green;
text-align: center;
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
}
p {
padding-top: 15px;
color: whitesmoke;
}
input {
margin-top: 15px;
width: 75%;
color: black;
font-weight: bolder;
}
input:focus {
background-color: #8ecae6;
}
输出：
2. 使用 Window:load 事件： 在完整的页面加载完毕，包括样式表和图片之后，window 对象的 load 事件会被触发。现在页面已经加载完成，我们可以使用 HTMLElement.focus() 方法将焦点提供给我们的元素（如果它能够获取焦点）。默认情况下，焦点元素将接收键盘和类似的事件。
语法：
HTMLElement.focus();
focus()方法可以有一个可选参数，该参数是一个对象，提供选项来控制聚焦过程的各个方面。
例子：
HTML
<!DOCTYPE html>
<html>
<head>
<title>Using load event</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<p>GeeksforGeeks</p>
<input type="text" placeholder=
"Hey Geeks, Type something here">
</div>
<script src="script.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
margin: auto;
margin-top: 10px;
height: 100px;
width: 300px;
background-color: green;
text-align: center;
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
}
p {
padding-top: 15px;
color: whitesmoke;
}
input {
margin-top: 15px;
width: 75%;
color: black;
font-weight: bolder;
}
input:focus {
background-color: #8ecae6;
}
JavaScript
let inputElem = document.querySelector("input");
window.addEventListener('load', function(e) {
inputElem.focus();
})
输出：
支持的浏览器：
