javascript CSS :: contenteditable 中元素的焦点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16832749/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: :focus of elements within contenteditable
提问by pvorb
If you have the following HTML:
如果您有以下 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 divthat is contenteditable?
有没有一种办法风格，正在编辑不同于所有其他段落的段落div是contenteditable？
div > p:focus { border: 1px solid red }
won't be applied to the paragraph being edited.
不会应用于正在编辑的段落。
Here's a JSFiddleyou can play with.
这是您可以使用的JSFiddle。
How can I style the paragraph being edited(the <p>-tag) differently?
如何以不同的方式设置正在编辑的段落（<p>-tag）的样式？
I'd prefer a CSS-only solution, but perhaps I'll have to use JavaScript.
我更喜欢仅使用 CSS 的解决方案，但也许我将不得不使用 JavaScript。
EDIT:
编辑：
Since we could not find a pure CSS solution (and using :hoveris 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.
由于我们找不到纯 CSS 解决方案（并且使用:hover对我来说不是真正的解决方案），我现在正在寻找一些 JavaScript 行来设置class="focus"正在编辑的节点上的属性。
采纳答案by pvorb
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 outlineproperty manually but you could of course add a class attribute and set the style via CSS.
在这里，我outline手动更改了属性，但您当然可以添加一个类属性并通过 CSS 设置样式。
You still have to manually check if selectedElementis a child of our <div>with the contenteditableattribute. But I think you can get the basic idea.
您仍然需要手动检查是否selectedElement是我们的<div>具有该contenteditable属性的子项。但我认为你可以得到基本的想法。
Here's the updated JSFiddle.
这是更新的 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 onselectionchangeevent handler, so I had to use onkeyupand onmouseup.
编辑：我更新了代码以及 JSFiddle，使其也能在 Firefox 和 Internet Explorer 9+ 中运行。不幸的是，这些浏览器没有onselectionchange事件处理程序，所以我不得不使用onkeyup和onmouseup。
回答by ralph.m
Interesting question. If it's viable, I'd suggest moving the contenteditable attribute to the ps themselves: http://codepen.io/pageaffairs/pen/FHKAC
有趣的问题。如果可行，我建议将 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>
EDIT: Here is another version, that causes para returns to generate paras instead of divs: http://codepen.io/pageaffairs/pen/dbyIa
编辑：这是另一个版本，它导致 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>
回答by dsgriffin
The following is imperfect in the sense that your mouse will need to be in the same area as the selected paragraph (to keep the :hoverargument true), but as this will usually be the case anyway this should be fine - it's the best you're going to get if you want to keep your markup as it is anyway:
以下是不完美的，因为您的鼠标需要与所选段落位于同一区域（以保持:hover论点正确），但由于通常情况如此，无论如何这应该没问题 - 这是最好的如果你想保持你的标记，无论如何都会得到：
CSS:
CSS：
div[contenteditable="true"]:focus > p:hover {
border: 2px solid red;
}
HTML:
HTML：
<div contenteditable="true">
<p>The first paragraph</p>
<p>The second paragraph</p>
</div>
If you're able to change the markup, you can use the following simplified selector:
如果您能够更改标记，则可以使用以下简化选择器：
CSS:
CSS：
p[contenteditable="true"]:focus {
border: 2px solid red;
}
HTML:
HTML：
<div>
<p contenteditable="true">The first paragraph</p>
<p contenteditable="true">The second paragraph</p>
</div>
