专注于嵌套的contenteditable元素 [英] Focusing on nested contenteditable element

问题描述

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

So, I have two contenteditable divs nested inside of another:

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

这是小提琴。

当它聚焦时，嵌套应该是专注，但使用 console.log（document.activeElement）; 它显示 top 是重点而不是识别嵌套 div。

When it is focused, nested should be focused but using console.log(document.activeElement); it shows that the top is focused and it doesn't recognize the nested div.

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

In a case where content is being edited, I need to recognize nested div element instead of the top element.

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

How would I achieve this? Any help will be much appreciated.

推荐答案

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

The way [contenteditable] elements are handled by browser made any nested [contenteditable] not handling any event, the editing host is the former editable parent. See spec:

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

If an element is editable and its parent element is not, or if an element is editable and it has no parent element, then the element is an editing host. Editable elements can be nested. User agents must make editing hosts focusable (which typically means they enter the tab order). An editing host can contain non-editable sections, these are handled as described below. An editing host can contain non-editable sections that contain further editing hosts.

现在作为一种解决方法，您可以制作专注的嵌套可编辑元素托管主机通过设置其任何可编辑的父级临时不可编辑。参见eg：

Now as a workaround, you could make focused nested editable element the hosting host by setting any of its editable parent temporaly not editable. See e.g:

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

-updated jsFiddle -

这篇关于专注于嵌套的contenteditable元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！