javascript - 当放置在行尾时，将插入符号放在 contenteditable 的 anchor 中

Question

我有以下 contenteditable div:

  <div class='editable' contenteditable><a href="http://somehref" target="_blank">Place caret in here on focus</a></div>

当 div 具有焦点时，我想将插入符号放在 anchor 标记的文本节点的末尾，以便当用户编辑文本时，他们正在编辑 anchor 的文本节点，而不是在 anchor 旁边添加新的文本节点标签。

我有这个jsbin这说明了问题所在。如果您将光标放在单词焦点之后并开始输入，您可以看到它没有更新 anchor 文本。

Answer 1

如果您从“div”中删除“contenteditable”属性并将其添加到“a”中 - 那么它就可以正常工作。但看起来你希望它在那里，所以这可能是一个解决方案。请记住，您需要在“a”标签内单击才能使其工作。

//no other javascript needed

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='editable' contenteditable>
  <a href="http://somehref"
     onmousedown="$(this).parent().removeAttr('contenteditable');"
     onblur="$(this).parent().attr('contenteditable','');"
     target="_blank"
     contenteditable>
    Place caret in here on focus
  </a>
</div>