onfocusin 事件

示例

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

亲自试一试 »

下面有更多 "亲自试一试" 示例。

描述

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

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

基于焦点的事件

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 onfocusin=" myScript">

亲自试一试 »

在 JavaScript 中：

object.onfocusin = function(){ myScript};

亲自试一试 »

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

object.addEventListener("focusin", myScript);

亲自试一试 »

技术细节

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

浏览器支持

onfocusin是 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>

亲自试一试 »