当元素获得焦点时,将发生HTML DOM onfocus事件。 onfocus事件通常与<input>,<select>和<a>一起使用。 onfocus事件与onblur事件相反。
HTML DOM onfocus事件支持除以下所有HTML标记:
- <base>
- <bdo>
- <br>
- <head>
- <html>
- <iframe>
- <meta>
- <param>
- <script>
- <style>
- <title>
用法:
- 在HTML中:
<element onfocus="myScript">
- 在JavaScript中:
object.onfocus = function(){myScript};
- 在JavaScript中,使用addEventListener()方法:
object.addEventListener("focus", myScript);
注意:onfocus事件与onfocusin事件不同,因为onfocus事件不会冒泡。
范例1:
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM onfocus Event
</title>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>
HTML DOM onfocus Event
</h2>
<br> Name:
<input type="text"
onfocus="geekfun(this)">
<script>
function geekfun(gfg) {
gfg.style.background = "green";
}
</script>
</center>
</body>
</html>
输出:
范例2:
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM onfocus Event
</title>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>HTML DOM onfocus Event</h2>
<br> Name:
<input type="text" id="fname">
<script>
document.getElementById(
"fname").onfocus = function() {
geekfun()
};
function geekfun() {
document.getElementById(
"fname").style.backgroundColor =
"green";
}
</script>
</center>
</body>
</html>
输出
范例3:
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM onfocus Event
</title>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>HTML DOM onfocus Event</h2>
<br> Name:
<input type="text" id="fname">
<script>
document.getElementById(
"fname").addEventListener(
"focus", Geeksfun);
function Geeksfun() {
document.getElementById(
"fname").style.backgroundColor = "green";
}
</script>
</center>
</body>
</html>
输出:
支持的浏览器:下面列出了HTML DOM onfocus事件支持的浏览器:
- 谷歌浏览器
- IE浏览器
- Firefox
- 苹果Safari
- Opera
相关用法
- HTML onfocus用法及代码示例
- HTML onbeforeunload事件用法及代码示例
- HTML oncanplay事件用法及代码示例
- HTML onbeforeprint事件用法及代码示例
- HTML onblur事件用法及代码示例
- HTML onfocusin事件用法及代码示例
- HTML fullscreenchange事件用法及代码示例
- HTML onfocusout事件用法及代码示例
- HTML onerror事件用法及代码示例
- HTML oncanplaythrough事件用法及代码示例
- HTML oncopy事件用法及代码示例
- HTML onresize事件用法及代码示例
- HTML onreset事件用法及代码示例
- HTML onscroll事件用法及代码示例
- HTML onclick事件用法及代码示例
注:本文由纯净天空筛选整理自Vijay Sirra大神的英文原创作品 HTML | DOM onfocus Event。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。