Question

我正在开发一个webapp，我遇到了JavaScript问题。

以下是导致问题的HTML的简化版本。我有一些嵌套contenteditable divs（我用占位符文本替换了真实内容）：

<div contenteditable="true" id="div1">
    text
    <div contenteditable="inherit" id="div2">
        text
        <div contenteditable="inherit" id="div3">
            text
        </div>
        text
    </div>
    text
</div>

我想通过JavaScript 获取所选元素（由用户编辑），但到目前为止我还没有找到方法（成功）。

我尝试了什么以及为什么它不起作用

我尝试使用document.activeElement，它应该返回焦点中的任何一个元素。通常这可行，但在使用嵌套的contenteditable元素时，它不会产生所需的结果。它返回最上面的contenteditable祖先，而不是返回用户正在编辑的元素。

例如，如果选择/正在编辑div2，则document.activeElement会返回div1。如果选择/正在修改div3，则document.activeElement也会返回div1。

所以我猜document.activeElement不是解决这个问题的正确方法。

如何获取正在编辑的最具体元素，而不是其最高contenteditable祖先？

Answer 1

我是通过在插入位置插入一个虚拟元素并找到它的直接父母来实现的。

function getActiveDiv() {
    var sel = window.getSelection();
    var range = sel.getRangeAt(0);
    var node = document.createElement('span');
    range.insertNode(node);
    range = range.cloneRange();
    range.selectNodeContents(node);
    range.collapse(false);
    sel.removeAllRanges();
    sel.addRange(range);
    var activeDiv = node.parentNode;
    node.parentNode.removeChild(node);
    return activeDiv;
}

我在小提琴上做了一个例子： https://jsfiddle.net/shhe05cj/4/

我在每个与相关div绑定的按键事件上运行它。

我基于另一个做类似事情的线程：Set caret position right after the inserted element in a contentEditable div

Answer 2

这个小提琴似乎对我有用： http://jsfiddle.net/dgrundel/huL4sjem/

我正在使用此代码进行检查：

<div contenteditable="true" class="edit">
    This is editable.
</div>

<script>
    $('.edit').on('click', function(){
        console.log(document.activeElement);
    });
</script>

当我点击可编辑元素时，控制台会获取记录到它的div的副本。

Answer 3

$('#edit').on('click', function() {
  // this is the innermost *node*
  var an = window.getSelection().anchorNode;
  // this is the innermost *element*
  var ae = an;
  while (!( ae instanceof Element ))
    ae = ae.parentElement;
  $('#an').text(an.nodeValue);
  $('#ae').text(ae.outerHTML);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div contenteditable="true" id="edit">
  This is editable. <span>What?</span> <em>How about this?</em>
</div>
<br/>
Active Node:<br/>
<pre id="an">Nothing</pre>
<br/>
Active Element:<br/>
<pre id="ae">Nothing</pre>
<br/>

你走了。点击“运行代码段”。玩得开心。

下面的示例显示了使用input事件的行为。这将模仿变异观察者的行为。

$('#edit').on('input', function() {
  // this is the innermost *node*
  var an = window.getSelection().anchorNode;
  // this is the innermost *element*
  var ae = an;
  while (!( ae instanceof Element ))
    ae = ae.parentElement;
  $('#an').text(an.nodeValue);
  $('#ae').text(ae.outerHTML);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div contenteditable="true" id="edit">
  This is editable. <span>What?</span> <em>How about this?</em>
</div>
<br/>
Active Node:<br/>
<pre id="an">Nothing</pre>
<br/>
Active Element:<br/>
<pre id="ae">Nothing</pre>
<br/>

以下示例显示了使用keydown和keyup事件的行为。这将捕获非修改按键，如箭头和修改键。

$('#edit').on('keydown keyup', function() {
  // this is the innermost *node*
  var an = window.getSelection().anchorNode;
  // this is the innermost *element*
  var ae = an;
  while (!( ae instanceof Element ))
    ae = ae.parentElement;
  $('#an').text(an.nodeValue);
  $('#ae').text(ae.outerHTML);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div contenteditable="true" id="edit">
  This is editable. <span>What?</span> <em>How about this?</em>
</div>
<br/>
Active Node:<br/>
<pre id="an">Nothing</pre>
<br/>
Active Element:<br/>
<pre id="ae">Nothing</pre>
<br/>

Answer 4

这对我有用：

   $(document).click(function(event) {
            console.log(event.target);
        });

如何获取正在编辑的元素？

4 个答案: