JavaScript：监听父元素及其子元素的焦点事件并联动 Textarea-js教程-PHP中文网

JavaScript：监听父元素及其子元素的焦点事件并联动 Textarea

DDD

发布： 2025-07-30 16:22:21

原创

817人浏览过

javascript：监听父元素及其子元素的焦点事件并联动 textarea

本文旨在提供一种解决方案，实现在 JavaScript 中监听父元素及其所有子元素的焦点事件，并在任何子元素获得焦点时，将焦点自动转移到指定的 Textarea 元素。通过为父元素添加 tabindex 属性使其可获得焦点，并利用事件监听器实现焦点联动。

实现原理

HTML 元素默认情况下并非全部都可以获得焦点。为了使 <div> 等元素能够响应焦点事件，我们需要为其添加 tabindex 属性。 tabindex 属性定义了元素在 Tab 键导航中的顺序。将其设置为 -1 表示该元素可以通过 JavaScript 获取焦点，但不能通过 Tab 键导航获得焦点；设置为 0 则表示可以通过 Tab 键导航获得焦点。

通过为父元素添加 focus 事件监听器，我们可以捕获到父元素及其任何子元素获得焦点时触发的事件。在事件处理函数中，我们可以将焦点转移到目标 textarea 元素。

具体步骤

修改 HTML 结构，为父元素添加 tabindex 属性：

立即学习“Java免费学习笔记（深入）”；

FashionLabs

AI服装模特、商品图，可商用，低价提升销量神器

查看详情

<div id="parent" tabindex="-1">
  <div class="line">
    <span class ="word">This </span>
    <span class ="word">is  </span>
    <span class ="word">a  </span>
    <span class ="word">line. </span>
  </div>
  <div class="line">
    <span class ="word">This </span>
    <span class ="word">is  </span>
    <span class ="word">another  </span>
    <span class ="word">line. </span>
  </div>
</div>

<textarea id="textarea"></textarea>

登录后复制

如上所示，我们在 <div id="parent"> 标签中添加了 tabindex="-1" 属性。如果希望通过Tab键导航到该父元素，则可以设置为 tabindex="0"。

编写 JavaScript 代码，添加事件监听器：
```
let parent = document.getElementById("parent");
let textarea = document.getElementById("textarea");

parent.addEventListener("focus", () => {
    console.log("focus");
    textarea.focus();
});
```
登录后复制
这段代码首先获取了 parent 和 textarea 元素。然后，为 parent 元素添加了一个 focus 事件监听器。当 parent 元素或其任何子元素获得焦点时，该监听器将触发，并将焦点转移到 textarea 元素。同时，在控制台打印 "focus"，用于调试。

完整示例代码

<!DOCTYPE html>
<html>
<head>
  <title>Focus Event Example</title>
</head>
<body>

  <div id="parent" tabindex="-1">
    <div class="line">
      <span class ="word">This </span>
      <span class ="word">is  </span>
      <span class ="word">a  </span>
      <span class ="word">line. </span>
    </div>
    <div class="line">
      <span class ="word">This </span>
      <span class ="word">is  </span>
      <span class ="word">another  </span>
      <span class ="word">line. </span>
    </div>
  </div>

  <textarea id="textarea"></textarea>

  <script>
    let parent = document.getElementById("parent");
    let textarea = document.getElementById("textarea");

    parent.addEventListener("focus", () => {
      console.log("focus");
      textarea.focus();
    });
  </script>

</body>
</html>

登录后复制

注意事项

确保目标 textarea 元素存在且可获得焦点。
tabindex 属性的值需要根据实际需求进行设置。如果需要通过 Tab 键导航到父元素，则设置为 0；如果只需要通过 JavaScript 获取焦点，则设置为 -1。
在复杂的应用场景中，可能需要考虑事件冒泡和捕获机制，以避免不必要的事件触发。
如果父元素的内容是动态生成的，确保在添加事件监听器之前，父元素已经加载到 DOM 中。