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

实现原理

HTML 元素默认情况下并非全部都可以获得焦点。为了使

等元素能够响应焦点事件，我们需要为其添加 tabindex 属性。 tabindex 属性定义了元素在 Tab 键导航中的顺序。 将其设置为 -1 表示该元素可以通过 JavaScript 获取焦点，但不能通过 Tab 键导航获得焦点；设置为 0 则表示可以通过 Tab 键导航获得焦点。

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

具体步骤

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

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

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

   如上所示，我们在

   标签中添加了 tabindex="-1" 属性。 如果希望通过Tab键导航到该父元素，则可以设置为 tabindex="0"。

2. 编写 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 中。

总结

通过为父元素添加 tabindex 属性并监听其 focus 事件，我们可以轻松地实现在父元素或其任何子元素获得焦点时，将焦点转移到指定 textarea 元素的功能。 这种方法简单有效，适用于各种需要联动焦点控制的场景。