HTML DOM focus() 方法
htmlweb developmentfront end technology更新于 2024/5/29 6:36:17
HTML DOM focus() 方法用于将焦点置于 HTML 元素上。焦点无法应用于所有 HTML 元素。例如:您无法将焦点置于 <p> 标签上。要从元素上移除焦点，请使用 blur() 方法。
语法
以下是语法 −
HTMLElementObject.focus()
示例
让我们看一个 focus() 方法的示例 −
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text]:focus, p:active {
color: blue;
font-size:35px;
background-color:lightpink;
border:2px solid blue;
}
input[type=text]{
color:black;
font-size:20px;
}
</style>
<script>
function enableFocus() {
document.getElementById("USR1").focus();
}
function disableFocus() {
document.getElementById("USR1").blur();
}
</script>
</head>
<body>
<h1>focus() method example</h1>
<label>USERNAME :<input id="USR1" type="text" size=5 maxlength=10></label>
<br><br>
<input type="button" onclick="enableFocus()" value="FOCUS">
<input type="button" onclick="disableFocus()" value="BLUR">
</body>
</html>
输出
这将产生以下输出 −
点击"FOCUS"按钮时 −
点击"BLUR"按钮时 −
在上面的例子中 −
我们首先创建了一个 id 为"USR1"的文本框并且 size 和 maxlength 属性值分别等于 5 和 10。
<label>USERNAME :<input id="USR1" type="text" size=5 maxlength=10></label>
我们创建了两种不同的 CSS 样式，分别用于文本框获得焦点、处于活动状态和非活动状态时 −
input[type=text]:focus, input[type=text]:active {
color: blue;
font-size:35px;
background-color:lightpink;
border:2px solid blue;
}
input[type=text]{
color:black;
font-size:20px;
}
然后，我们创建了两个按钮 FOCUS 和 BLUR，当用户点击它们时，它们将分别执行 enableFocus() 和 disableFocus() 方法 −
<input type=“button" onclick=“enableFocus()" value=“FOCUS"> <input type=“button" onclick=“disableFocus()" value=“BLUR">
enableFocus() 方法使用 getElementById() 方法获取类型为 “text” 的输入元素，并启用其 focus() 方法将焦点设置在文本框上，从而将我们的 :focus 样式应用于文本框。disableFocus() 方法获取 id 为 “USR1” 的输入元素。并调用 blur() 方法，将焦点从文本框中移除，并将我们的正常 CSS 样式应用于文本框，即恢复为默认样式 −
function enableFocus() {
document.getElementById("USR1").focus();
}
function disableFocus() {
document.getElementById("USR1").blur();
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
