HTML onfocus 事件

onfocus 事件在元素获得焦点时触发。onfocus 常用于 <input>、<select> 以及 <a>。

实例

当输入字段获得焦点时执行JavaScript:

<!DOCTYPE html>
<html>
<body>
<p>当其中一个输入字段获得焦点时，将触发一个函数。该函数更改输入字段的背景颜色。</p>
姓氏: <input type="text" id="fname" onfocus="myFunction(this.id)"><br>
名字: <input type="text" id="lname" onfocus="myFunction(this.id)">
<script>
function myFunction(x) {
  document.getElementById(x).style.background = "yellow";
}
</script>
</body>
</html>

运行一下

浏览器支持

事件
onfocus	Yes	Yes	Yes	Yes	Yes

所有主流浏览器都支持 onfocus 事件。

定义和用法

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

onfocus 常用于 <input>、<select> 以及 <a>.

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

注释：onfocus 事件不适用于以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。

HTML 4.01 与 HTML5 之间的差异

无。

语法

<element onfocus="script">

属性值

值	描述
script	onfocus 发生时运行的脚本。

更多实例

<!DOCTYPE html>
<html>
<body>
<p>当您输入字段时，将触发一个函数，该函数将背景色设置为黄色。离开输入字段时，会触发一个函数，将背景颜色设置为红色。</p>
输入名称: <input type="text" id="myInput" onfocus="focusFunction()" onblur="blurFunction()">
<script>
function focusFunction() {
  document.getElementById("myInput").style.background = "yellow";
}
function blurFunction() {
  document.getElementById("myInput").style.background = "red";
}
</script>
</body>
</html>