javascript - CSS::contenteditable 中元素的焦点

Question

如果您有以下 HTML:

<div contenteditable="true">
  <p>The first paragraph</p>
  <p>The second paragraph</p>
</div>

有没有一种方法可以使正在编辑的段落的样式与 div 中的所有其他段落不同？那是 contenteditable ？

div > p:focus { border: 1px solid red }

不会应用于正在编辑的段落。

这是一个 JSFiddle 你可以玩。

如何设置正在编辑的段落(<p> -标签)的不同样式？

我更喜欢纯 CSS 解决方案，但也许我必须使用 JavaScript。

编辑:

因为我们找不到纯 CSS 解决方案(并且使用 :hover 对我来说不是一个真正的解决方案)我现在正在寻找一些设置属性 class="focus" 的 JavaScript 行在正在编辑的节点上。

Answer 1

我想我找到了解决办法。

使用以下代码片段，您可以在选择发生变化时获取当前插入符位置的父元素。

var selectedElement = null;
function setFocus(e) {
  if (selectedElement)
    selectedElement.style.outline = 'none';

  selectedElement = window.getSelection().focusNode.parentNode;
  // walk up the DOM tree until the parent node is contentEditable
  while (selectedElement.parentNode.contentEditable != 'true') {
    selectedElement = selectedElement.parentNode;
  }
  selectedElement.style.outline = '1px solid #f00';
};
document.onkeyup = setFocus;
document.onmouseup = setFocus;

我在这里更改了 outline手动属性，但您当然可以添加类属性并通过 CSS 设置样式。

您仍然需要手动检查是否 selectedElement是我们的 child <div>与 contenteditable属性。但我认为您可以了解基本概念。

这是 updated JSFiddle .

编辑:我更新了代码和 JSFiddle，使其也可以在 Firefox 和 Internet Explorer 9+ 中运行。不幸的是，这些浏览器没有 onselectionchange事件处理程序，所以我不得不使用 onkeyup和 onmouseup .