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

Question

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

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

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

Answer 1

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 2

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

Answer 3

你可以监听keyup事件