Javascript - 在[contenteditable]的子元素中获取插入符号元素

我正在使用Javascript构建一个简单易用的文本编辑器，基本上是一个所见即所得的编辑器。我将使用contenteditable属性作为主包装（.wrapper）。当您在.wrapper内按下输入时，会将带有唯一id的新<p>元素附加到包装。Javascript - 在[contenteditable]的子元素中获取插入符号元素

我需要一种方法来获取当前选择的.wrapper的哪个子元素（即正在聚焦或在其中有插入/文本标记）。

我搜索了几天没有任何结果，我试过使用document.elementFromPoint()但没有任何正确的结果。

当使用$(":focus")时，我得到整个.wrapper而不是特定的子元素。

编辑：

例HTML结构：

<div class="container t-wrapper" contenteditable> 
</div>

实施例的Javascript代码：

$(document).ready(function() { 
    $currentElement = $("[contenteditable]"); 

    $(".t-wrapper").each(function() { 
     var id = generateIdentifier(6); // Ignore this 

     /* This creates the initial <p> child element, where you start typing. */ 
     $(this).html('<p class="t-empty t-first" id="' + id + '"></p>'); 

     $(this).on("mouseup", function() { 
      /* $currentElement = whatever element the caret is inside. */ 
     }); 

     $(this).on("keyup", function() { 
      /* $currentElement = whatever element the caret is inside. */ 
     }); 
    )); 
});

编辑2：

我设法GE它与mouseup事件相当合作，因为你实际上点击了一些东西。但是，在使用键盘移动插入符号时，我需要此功能。或者，我需要一些方法来获取插入符号的位置，然后使用document.elementFromPoint()来获取特定元素。

来源

2016-02-29 Daniel Hallgren

您是否尝试过只对选定的节点上使用CONTENTEDITABLE？例如，您可以将新的'p'设置为'contenteditable =“true”'，同时禁用所有其他元素。在浏览节点树时（单击或箭头键），可以将'contenteditable'属性移到下一个元素。这似乎至少可以使用'：focus'搜索子节点。 –

有一段代码吗？ –

@ freestock.tk添加了一些基本的示例代码。 –

-1

document.activeElement将返回当前的焦点元素。

来源

2016-02-29 22:20:09

这与编写'$（“：focus”）'相同，这标志着整个'.wrapper'，因为那是我想是'contenteditable'属性。 –

:focus不会选择您的元素，因为它们不可聚焦。

您可以通过在HTML中添加tabindex="-1"或在JS中添加tabIndex = -1来使它们变得可以聚焦。

var generateIdentifier = Math.random; 
 
var currentElement = document.querySelector("[contenteditable]"); 
 
[].forEach.call(document.querySelectorAll(".t-wrapper"), function(el) { 
 
    var first = document.createElement('p'); 
 
    first.className = "t-empty t-first"; 
 
    first.id = generateIdentifier(6); 
 
    first.textContent = 'Press enter to create new paragraphs'; 
 
    first.tabIndex = -1; 
 
    el.appendChild(first); 
 
});

.container > :focus { 
 
    border: 1px solid blue; 
 
}

<div class="container t-wrapper" contenteditable></div>

看来，如果你把它添加到第一款，新段自动获取它。但是，如果你想确定，我想你可以使用一个突变的观察者或keyup事件侦听器来检测段没有tabindex，并将其添加：

el.addEventListener("keyup", function(e) { 
    var newChild = el.querySelector('p:not([tabindex])'); 
    if(newChild) newChild.tabIndex = -1; 
});

来源

2016-03-02 19:24:54 Oriol

谢谢你的回复！我一定会测试这个。你首先提到'tabindex =“1”'，但在你指定索引为'-1'的代码中。这是为什么？错字？ –

@DanielPox我的意思是'-1'。当你按Tab键时，焦点会根据'tabindex'转到下一个可调焦元素。 'tabindex = -1'使得元素可以被聚焦，但是不能被tab键迭代。如果您希望它们是可迭代的，请使用正数。 – Oriol

该死的，即使它们是可以对焦的，当你写入段落时，Chrome也不会考虑段落。 – Oriol

Javascript - 在[contenteditable]的子元素中获取插入符号元素

回答

相关问题