Question

我有以下令人满意的div：

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

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

我有这个显示问题的jsbin。如果将光标放在焦点一词之后并开始输入，则可以看到它没有更新锚文本。

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>

放置在线的末端时，将插入符号置于可信的锚中

1 个答案: