CSS：：元素在contenteditable中的重点 [英] CSS: :focus of elements within contenteditable

问题描述

如果您有以下HTML：

 < div contenteditable =true> 
< p>第一段< / p> 
< p>第二段< / p> 
< / div> 
  

是否有一种方法可以对正在编辑的段落进行不同于 div 是 contenteditable ？

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

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

以下是 JSFiddle （< p>

）

code> -tag）不同？

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

EDIT：

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

解决方案

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

您可以在选择更改时在当前插入位置获取父元素。

  var selectedElement = null; 
 function setFocus（e）{
 if（selectedElement）
 selectedElement.style.outline ='none'; 
 
 selectedElement = window.getSelection（）。focusNode.parentNode; 
 //向上遍历DOM树，直到父节点为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， 9+。不幸的是，这些浏览器没有 onselectionchange 事件处理程序，所以我不得不使用 onkeyup 和 onmouseup 。

If you have the following HTML:

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

Is there a way to style the paragraph that is being edited differently from all other paragraphs in the div that is contenteditable?

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

won't be applied to the paragraph being edited.

Here's a JSFiddle you can play with.

How can I style the paragraph being edited (the <p>-tag) differently?

I'd prefer a CSS-only solution, but perhaps I'll have to use JavaScript.

EDIT:

Since we could not find a pure CSS solution (and using :hover is not a real solution for me) I am now looking for some lines of JavaScript that set the attribute class="focus" on the node that is being edited.

解决方案

I think I found a solution.

With the following code snippet you can get the parent element at the current caret position when the selection changes.

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;

Here I change the outline property manually but you could of course add a class attribute and set the style via CSS.

You still have to manually check if selectedElement is a child of our <div> with the contenteditable attribute. But I think you can get the basic idea.

Here's the updated JSFiddle.

EDIT: I updated the code as well as the JSFiddle to make it work in Firefox and Internet Explorer 9+, too. Unfortunately these Browsers do not have a onselectionchange event handler, so I had to use onkeyup and onmouseup.

这篇关于CSS：：元素在contenteditable中的重点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！