在contenteditable true div內設置插入符後面的contenteditable false span div

Question

是否有可能在滿足contenteditable真正div的contenteditable false後面設置插入符/光標在span後面？

實施例：

$('#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

只需添加一個<br>中包含contenteditable =假跨度後面。

$('#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>