16

如果您有以下 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>-tag）？

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

编辑：

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

4

3 回答 3

10

我想我找到了解决办法。

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

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是我们的子<div>属性contenteditable。但我认为你可以得到基本的想法。

这是更新的 JSFiddle。

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

于 2013-05-30T15:46:32.133 回答
3

有趣的问题。如果可行，我建议将 contenteditable 属性移到ps 本身：http ://codepen.io/pageaffairs/pen/FHKAC

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

div > p:focus {outline: 1px solid red; }

</style>

</head>
<body>

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

</body>
</html>

编辑：这是另一个版本，它导致 para 返回生成 paras 而不是 div：http ://codepen.io/pageaffairs/pen/dbyIa

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

div:focus {outline: none;}
div > p:focus, div > p:hover {outline: 1px solid red; }

</style>

</head>
<body>

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

</body>
</html>
于 2013-05-30T09:56:37.333 回答
2

jsFiddle在这里。

以下是不完美的，因为您的鼠标需要与所选段落位于同一区域（以保持:hover论点为真），但无论如何通常都是这种情况，这应该没问题 - 这是最好的如果您想保持标记原样，将会得到：

CSS：

div[contenteditable="true"]:focus > p:hover {
   border: 2px solid red;
}

HTML：

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

jsFiddle在这里。

如果您能够更改标记，则可以使用以下简化选择器：

CSS：

p[contenteditable="true"]:focus {
   border: 2px solid red;
}

HTML：

<div>
   <p contenteditable="true">The first paragraph</p>
   <p contenteditable="true">The second paragraph</p>
</div>
于 2013-05-30T10:21:00.470 回答