文本光標未在div元素的contenteditable span中更新

Question

在編輯<div>元素中的<span>元素時，文本光標的位置沒有更新，因此我決定發布此問與答，以防其他人遇到相同的問題。 為什么文本光標不更新其位置？ 當它沒有包裝在<div>元素中時，它會更新良好。 看下面的示例代碼。 文本光標似乎在位置1（或span的第一個字母之后）“凍結”。

筆記：

• <span>元素具有contenteditable="true" 。
• 未在<div>元素上設置contenteditable 。

 $('.editableSpan').on('click keydown', function(e) { if ($(this).css('background-color') !== 'rgba(0, 0, 0, 0)') { $(this).css('background-color', ''); $(this).text(''); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>This is a div with <span class="editableSpan" contenteditable="true" style="background-color: rgb(250, 197, 28);">an editable span</span>.</div> <span class="editableSpan" contenteditable="true" style="background-color: rgb(250, 197, 28);">This is an editable span</span> 

Answer 1

解決此問題的一個簡單方法是設置display: inline-block; 到<span>元素。 但是，我不確定這為什么起作用。 請隨時在此問答中添加說明原因。 謝謝。

 $('.editableSpan').on('click keydown', function(e) { if ($(this).css('background-color') !== 'rgba(0, 0, 0, 0)') { $(this).css('background-color', ''); $(this).text(''); } }); 

 .editableSpan { display: inline-block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>This is a div with <span class="editableSpan" contenteditable="true" style="background-color: rgb(250, 197, 28);">an editable span</span>.</div> <span class="editableSpan" contenteditable="true" style="background-color: rgb(250, 197, 28);">This is an editable span</span>