在 contenteditable true div 内的 contenteditable false span 后面设置 Caret

【问题标题】：Set Caret behind contenteditable false span inside contenteditable true div在 contenteditable true div 内的 contenteditable false span 后面设置 Caret
【发布时间】：2017-06-08 20:51:04
【问题描述】：

是否可以在 contenteditable true div 内将插入符号/光标设置在 contenteditable false 的 span 后面？

例子：

$('#straightHtml').html('&lt;p&gt;&lt;span contenteditable="false"&gt;test&lt;/span&gt;&lt;/p&gt;')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id='straightHtml' contenteditable="true">
</div>

【问题讨论】：

标签： html position contenteditable caret

【解决方案1】：

只需在 contenteditable=false 跨度后面添加 <br>。

$('#straightHtml').html('<p><span contenteditable="false">test</span><br></p>')

试一试：

$('#straightHtml').html('&lt;p&gt;&lt;span contenteditable="false"&gt;test&lt;/span&gt;&lt;br&gt;&lt;/p&gt;')

* {
  border: 1px solid black;
}

span {
  width: auto;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id='straightHtml' contenteditable="true">
</div>

【讨论】：