onfocus 事件

当 input 输入框获取焦点时执行一段 Javascript代码：

代码
结果

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>蜜蜂教程(mifengjc.com)</title>
</head>
<head>
  <script>
    function myFunction(x) {
      x.style.background = "yellow";
    }
  </script>
</head>
<body>

  输入你的名字: <input type="text" onfocus="myFunction(this)">
  <p>当输入框获取焦点时，修改背景色（background-color属性） 将被触发。</p>

</body>
</html>

尝试一下 »

定义和用法

onfocus 事件在对象获得焦点时发生。

Onfocus 通常用于 <input>, <select>, 和<a>.

提示： onfocus 事件的相反事件为 onblur 事件。

语法

HTML 中:

<element onfocus="SomeJavaScriptCode">

JavaScript 中:

object.onfocus = function() {
  SomeJavaScriptCode
}

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("focus", myScript);

代码
结果

<p>该实例使用了 addEventListener() 方法来添加 input 元素的获取焦点事件。</p>
输入您的姓名: <input type="text" id="fname">
<script>
  document.getElementById("fname").addEventListener("focus", myFunction);

  function myFunction() {
    document.getElementById("fname").style.backgroundColor = "red";
  }
</script>