onfocus 事件

示例

当输入字段获得焦点时调用函数：

亲自试一试 »

描述

这个onfocus当元素获得焦点时发生事件。

这个onfocus事件通常用于输入字段。

基于焦点的事件

Event	Occurs When
focus	An element gets focus
blur	An element loses focus
focusin	An element gets focus
focusout	An element loses focus

也可以看看：

焦点事件对象

语法

在 HTML 中：

< element onfocus=" myScript">

亲自试一试 »

在 JavaScript 中：

object.onfocus = function(){ myScript};

亲自试一试 »

在 JavaScript 中，使用 addEventListener() 方法：

object.addEventListener("focus", myScript);

亲自试一试 »

技术细节

气泡：	不
可取消：	不
事件类型：	焦点事件
HTML 标签：	所有 HTML 元素，除了：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 和 <title>
DOM 版本：	2 级活动

浏览器支持

onfocus是 DOM Level 2 (2001) 功能。

所有浏览器都完全支持它：


Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

更多示例

示例

使用焦点和模糊:

亲自试一试 »

示例

清除焦点上的输入字段：

亲自试一试 »

示例

事件委托：使用重点和模糊事件：

放使用捕获addEventListener() 的参数为真的:

<form id="myForm">
<input type="text" id="myInput">
</form>

<script>
let x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);

function myFocusFunction() {
document.getElementById("myInput").style.backgroundColor = "yellow";
}

function myBlurFunction() {
document.getElementById("myInput").style.backgroundColor = "";
}
</script>

亲自试一试 »

示例

事件委托：使用专注于和聚焦事件：

<form id="myForm">
<input type="text" id="myInput">
</form>

<script>
let x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);

function myFocusFunction() {
document.getElementById("myInput").style.backgroundColor = "yellow";
}

function myBlurFunction() {
document.getElementById("myInput").style.backgroundColor = "";
}
</script>

亲自试一试 »