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

【问题标题】：How to move text cursor to inserted DOM element?如何将文本光标移动到插入的 DOM 元素？
【发布时间】：2014-02-03 08:24:03
【问题描述】：

我正在使用 jQuery 在一个元素之后插入一个 DOM 节点，该元素有一个 contenteditable 父级。我想将光标集中在插入的 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();
  }
});

【问题讨论】：

嗯，还有其他方法可以移动光标吗？在这个网站上，他们可以移动光标以在敲击回车时生成一个 P 标签，然后将光标移动到它上面。这会覆盖正常的 contenteditable 行为。 daviferreira.github.io/medium-editor
您可以自行更改光标位置：stackoverflow.com/questions/2388164/…

标签： jquery cursor contenteditable

【解决方案1】：

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

如果您想将光标移动到一个元素中，您需要创建一个range 并将其添加到选择中（IE

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。

【讨论】：

谢谢，我确定您所说的 anchorNode 假设是什么意思。有没有更好的方法来获取起始节点？另外，我正在尝试document.execCommand('formatBlock', false, 'p');，这似乎适用于 keyup，但仍然不是很好。
@Chanpory：我假设由于您使用的是anchorNode.parentElement，因此您正在尝试获取选择锚的容器元素（在文档中可能比选择的@987654328 @，顺便一提）。如果anchorNode 是一个元素，你可能不想要它的父元素。
啊，你是对的。看起来我需要放置一个条件来测试锚节点是否是文本节点，除非有其他方法。谢谢！