HTML DOM focus() 方法

元素对象参考手册 元素对象

为 <a> 元素设置焦点:

<!DOCTYPE html>
<html>
<head>
  <style>
    a:focus,
    a:active {
      color: green;
    }
  </style>
</head>
<body>

  <a id="myAnchor" href="https://www.mifengjc.com">访问蜜蜂教程</a>

  <p>点击按钮设置或移除以上链接的焦点。</p>

  <input type="button" onclick="getfocus()" value="获取焦点">
  <input type="button" onclick="losefocus()" value="移除焦点">

  <script>
    function getfocus() {
      document.getElementById("myAnchor").focus();
    }

    function losefocus() {
      document.getElementById("myAnchor").blur();
    }
  </script>

</body>
</html>

尝试一下 »

定义和使用

focus() 方法用于为元素设置焦点（如果可以设置）。

提示：使用 blur() 方法来移除元素焦点。

浏览器支持

方法




focus() Yes Yes Yes Yes Yes

语法

HTMLElementObject.focus()

参数

None

技术描述

返回值： 没有返回值

更多实例

为文本域设置焦点：

<input type="text" id="myText" value="文本域">
<p>点击按钮设置或移除以上文本域的焦点。</p>
<input type="button" onclick="getfocus()" value="获取焦点">
<input type="button" onclick="losefocus()" value="移除焦点">
<script>
  function getfocus() {
    document.getElementById("myText").focus();
  }

  function losefocus() {
    document.getElementById("myText").blur();
  }
</script>

尝试一下 »


在文档加载后，为文本域设置焦点:

<!DOCTYPE html>
<html>
<body>

  <p>该实例中，在文档加载后获取焦点：</p>

  <input type="text" id="myText" value="文本域">

  <script>
    window.onload = function() {
      document.getElementById("myText").focus();
    };
  </script>

</body>
</html>

尝试一下 »

相关页面

HTML DOM 参考手册: onfocus 事件

元素对象参考手册 元素对象