Question

所以，我有两个嵌套在另一个内部的contenteditable div：

<div class="top" contenteditable="true">
     <div class="nested" contenteditable="true">This</div>
</div>

这是Fiddle。

如果重点突出，nested应该集中注意力，但使用console.log(document.activeElement);会显示top已被关注，并且它无法识别nested div。

在正在编辑内容的情况下，我需要识别nested div元素而不是top元素。

我将如何实现这一目标？任何帮助将不胜感激。

Answer 1

浏览器处理[contenteditable]元素的方式使任何嵌套[contenteditable]不处理任何事件，编辑主机是以前可编辑的父级。见spec：

如果一个元素是可编辑的，而它的父元素不是，或者是一个元素是可编辑的，它没有父元素，那么元素是编辑主持人。可编辑元素可以嵌套。用户代理必须使编辑主机可聚焦（这通常意味着他们进入选项卡订购）。编辑主机可以包含不可编辑的部分，这些部分是如下所述处理。编辑主机可以包含不可编辑的部分，其中包含更多编辑主机。

现在作为一种解决方法，您可以通过将其任何可编辑的父级临时设置为不可编辑来使重点嵌套的可编辑元素成为托管主机。见例如：

$('div.top [contenteditable]').on('focusin focusout', function(e) {
    $(this).parents('[contenteditable]').prop('contenteditable', e.type === "focusout");
});

专注于嵌套的contenteditable元素

1 个答案:

-updated jsFiddle-