onfocus 事件

DOM 事件 FocusEvent

实例

当输入字段获得焦点时执行 JavaScript： 
<input type="text" onfocus="myFunction()">

亲自试一试

页面下方有更多 TIY 实例。

定义和用法

onfocus 事件在元素获得焦点时发生。

onfocus 事件最常与 <input>、<select> 和 <a> 一起使用。

提示： onfocus 事件与 onblur 事件相反。

提示： onfocus 事件类似于 onfocusin 事件。主要区别在于 onfocus 事件不会冒泡。因此，如果您想确定一个元素或其子元素是否获得焦点，可使用 onfocusin 事件。但是，您可以通过对 onfocus 事件使用 addEventListener() 方法的 useCapture 参数来实现这一点。

浏览器支持

事件 Chrome IE Firefox Safari Opera
onfocus 支持 支持 支持 支持 支持

语法

在 HTML 中：

<element onfocus="myScript">

亲自试一试

在 JavaScript 中：

object.onfocus = function(){myScript};

亲自试一试

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

object.addEventListener("focus", myScript);

亲自试一试

注释：Internet Explorer 8 或更早的版本不支持 addEventListener() 方法。

技术细节

冒泡： 不支持
可取消： 不支持
事件类型： FocusEvent
支持的 HTML 标签： 所有 HTML 元素，除了：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> 以及 <title>
DOM 版本： Level 2 Events

更多实例

实例

将 "onfocus" 与 "onblur" 事件一起使用：

<input type="text" onfocus="focusFunction()" onblur="blurFunction()">

亲自试一试

实例

清空获得焦点的输入字段：

<!-- 当输入字段获得焦点时，将其当前值替换为空字符串 -->
<input type="text" onfocus="this.value=''" value="Blabla">

亲自试一试

实例

事件委托：将 addEventListener() 的 useCapture 参数设置为 true：

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

<script>
var 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>

亲自试一试

实例

事件委托：使用 focusin 事件（Firefox 不支持）：

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

<script>
var 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>

亲自试一试

DOM 事件 FocusEvent