在内容可编辑中添加类活动元素

Add class active element in contenteditable

本文关键字:添加 活动 元素 编辑      更新时间:2023-09-26

我需要将类添加到这个重点元素中。我正在尝试做的是,在使用up/down箭头键导航时检测哪一行处于活动状态。
实际上我的代码执行该功能,但我不知道如何向这个重点元素添加类。
提前谢谢你!

下面是一个片段:

var selectedElement = null;
function setFocus(e) {
  if (selectedElement)
    selectedElement.style.outline = 'none';
  selectedElement = window.getSelection().focusNode.parentNode;
  selectedElement.style.outline = '1px solid #f00';
};
document.onkeyup = setFocus;
document.onmouseup = setFocus;
div:focus { outline: none; }
<ul contenteditable="true">
  <li>The first paragraph</li>
  <li>The second paragraph</li>
</ul>

试试这个:

 selectedElement.className += " active";
但不要忘记在每个菜单项

上进行迭代,并从另一个菜单项中删除。