CSS：：contenteditable中元素的焦点

CSS：：contenteditable中元素的焦点

我想我找到了解决方案。

通过以下代码片段，您可以在选择更改时将父元素置于当前插入符号位置。

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，使其也可以在Firefox和Internet Explorer9+中使用。不幸的是，这些浏览器没有

onselectionchange

事件处理程序，因此我不得不使用

onkeyup

和

onmouseup

。