按下右箭頭鍵時光標消失

內容可編輯div具有跨度和簡單文本等html元素。按下右箭頭鍵時光標消失

.ing-tag_0{ 
 
color:white; 
 
background-color: blue; 
 
}

<div value="" id="step_input_0" name="step" placeholder="Tell us about step 1" class="input stepbox step_input" contenteditable="true">sdf dsaf asdf s <span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span></div>

將光標移動到div的末尾。從光標的末端連續按下左箭頭鍵不斷移動跨度。這可以正常工作。

現在將光標移動到div的開頭，然後嘗試通過連續按右箭頭鍵移動到div的右側，然後光標在遇到跨度時的某個點消失。

我在哪裏錯了。

請建議一種方式，如果我按右箭頭光標移動到結束通過通過div。

跨度不得爲可編輯內容，因爲這些是固定的。

編輯

我沒有任何其他的選項來改變這種狀況。我已經嘗試添加零寬度的空格。

這對safari無效。
如果用戶刪除此空格，該怎麼辦？光標再次消失。

來源

2017-09-14 Akhil Sahu

很多貌似https://stackoverflow.com/questions/46215933/get-and-set-the-position-of-the-cursor-in-content-editable-div ？noredirect = 1只是不同的用戶 –

如果你也是「ser cha」，那麼再次提出同樣的問題是沒有意義的 –

我不能跟着鏈接 –

只需在每個<span>之間添加空格。最後，div裏面放置了一個零寬度空間（）。希望這能解決你的問題！

.ing-tag_0{ 
 
color: white; 
 
background-color: cyan; 
 
}

<div value="" id="step_input_0" name="step" placeholder="Tell us about step 1" class="input stepbox step_input" contenteditable="true">sdf dsaf asdf s <span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span> <span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span> <span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span> <span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span> <span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span> <span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span> <span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span> <span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span> <span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span>&#8203;</div>

來源

2017-09-14 11:47:49 Booligoosh

我已經嘗試過，請檢查編輯 –

按下右箭頭鍵時光標消失

回答

相關問題