javascript - 对于可编辑的div，怎么实现高亮当前行的效果?

Question

在用div模拟的编辑器中，如何获取输入光标所在的div元素，然后实现高亮输入光标所在行的效果html结构如下：

<div id="editArea" contenteditable="true">    <div>1234</div>    <div>一二三四</div>    <div>壹贰叁肆</div></div>

对于可编辑的div，我尝试用获得焦点和失去焦点的事件来实现高亮当前行的效果，但是在用↑、↓、回车和退格键改变输入光标所在行后，并没有触发焦点事件，只有点击时才触发。

Answer 1

光标可以通过 selection 来做到，在外层监听相关事件，然后获取 selection，再修改样式。

Answer 2

1. 使用document.getSelection()方法可以获取当前的选区
2. 获取到当前选区之后可以对当前选取的对应元素对应的样式

下面给你一段参考的代码，里面具体的触发绑定事件需要自行决定

    <div id="editArea" contenteditable="true">      <div id="div1">1234</div>      <div id="div2">一二三四</div>      <div id="div3">壹贰叁肆</div>    </div>        <script>    let highlightedElement = null;        function highlightCurrentElement() {      // 如果之前有高亮的元素，移除高亮      if (highlightedElement) {        highlightedElement.classList.remove('highlighted');      }          const selection = document.getSelection();      if (selection && selection.anchorNode && selection.anchorNode.parentNode) {        highlightedElement = selection.anchorNode.parentNode;        highlightedElement.classList.add('highlighted');      }    }        document.getElementById('editArea').addEventListener('click', highlightCurrentElement);    </script>

Answer 3

你可以监听keyup事件