Question

我正在使用jQuery在一个元素之后插入一个DOM节点，该元素具有一个可信的父节点。我想将光标集中在插入的DOM节点上，但是在插入的元素上调用focus()似乎不起作用。这是我试过的。

// HTML
<div class="foo" contenteditable>
  <h1>Foo</h1>
</div>

// jQuery
$(document).on('keydown', '.foo', function(e){
  if (e.keyCode == 13) {
    var anchor = $( document.getSelection().anchorNode.parentElement ),
    var el = $("<p></p>");

    anchor.after(el);

    el.focus();
    e.preventDefault();
  }
});

Answer 1

您无法关注可信元素中的元素，只关注整个可信元素本身。此外，您有一个错误的假设：选择的anchorNode属性不能保证是文本节点。它可能是一个元素。

如果要将光标移动到元素中，则需要创建range并将其添加到选择中（IE＆lt; = 8除外，它不支持Range或Selection并有不同的API）：

var sel = window.getSelection();
var range = document.createRange();
range.selectNodeContents(el[0]); // Assuming el is a jQuery object
sel.removeAllRanges();
sel.addRange(range);

这仍有问题：大多数浏览器都不允许您将插入符号放在空的内联元素中，因此您可能需要做一些讨厌的解决方法，例如在元素中添加零宽度空格字符并选择它。例如，请参阅https://bugs.webkit.org/show_bug.cgi?id=15256。

如何将文本光标移动到插入的DOM元素？

1 个答案: