contenteditable true div内のcontenteditable false spanの後にキャレットを設定

Question

contenteditable true div内でcontenteditable falseを持つスパンの後ろにキャレット/カーソルを設定できますか？

例：

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

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

 

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

Answer 1

ただのcontentEditable = falseのスパンの後ろ<br>を追加します。

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

は試してみる：

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

* { 
 
    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>