javascript – CSS：：contented元素的焦点

如果您有以下 HTML：

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

有没有办法将正在编辑的段落与div中的所有其他段落进行风格区分？

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

将不适用于正在编辑的段落.

这是一个JSFiddle你可以玩.

如何对正在编辑的段落(< p> -tag)进行风格不同？

我更喜欢一个CSS唯一的解决方案,但也许我必须使用JavaScript.

编辑：

因为我们找不到一个纯CSS的解决方案(并且使用：hover不是一个真正的解决方案),我现在正在寻找一些JavaScript行,将属性class =“focus”设置在正在编辑的节点上.

解决方法

我想我找到了一个解决方案.

使用以下代码片段,您可以在选择更改时在当前插入符号位置获取父元素.

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;

这里我手动更改大纲属性,但您可以添加一个类属性并通过CSS设置样式.

您仍然需要手动检查selectedElement是否为我们< div>具有contenteditable属性.但我想你可以得到基本的想法.

这是updated JSFiddle.

编辑：我更新了代码以及JSfiddle,使其在Firefox和Internet Explorer 9中工作.不幸的是,这些浏览器没有onselectionchange事件处理程序,所以我不得不使用onkeyup和onmouseup.