当使用箭头键时，Contenteditable跳转到另一个元素

如果contenteditable在文本末尾有span元素，并且使用箭头键跳转到另一个contenteditable。

例如; 当我的光标移动到第二个内容时，我将移动箭头键，并且光标跳到第三个内容区域。 但光标必须留在第二部分。

<div class="container translationSectiontargetText" contenteditable="true" spellcheck="false" dir="ltr"  >
before
</div>

<div class="container translationSectiontargetText" contenteditable="true" spellcheck="false" dir="ltr"  ><span class="tag" data-number="1" contenteditable="false">1</span>target content<span class="tag" data-number="1" contenteditable="false">1</span></div>

<div class="container translationSectiontargetText" contenteditable="true" spellcheck="false" dir="ltr"  >
after
</div>

这是jsfiddle链接;

https://jsfiddle.net/7jf80nv8/

---

我希望它能帮助你

let divs = document.querySelectorAll('div');
divs.forEach(div => {
	div.onkeydown= event => {
  	let position = document.getSelection().getRangeAt(0).startOffset;
    let first_span_text_length = div.querySelectorAll('span')[0].innerText.length;
  	let text_length = div.innerText.length - first_span_text_length - 1 
  	if(event.keyCode == 39 && position == text_length){
  		return false;
  	}
}
});

<div class="container translationSectiontargetText" contenteditable="true" spellcheck="false" dir="ltr"  >
before
</div>

<div class="container translationSectiontargetText" contenteditable="true" spellcheck="false" dir="ltr"  ><span class="tag" data-number="1" contenteditable="false">1</span>target content<span class="tag" data-number="1" contenteditable="false">1</span></div>

<div class="container translationSectiontargetText" contenteditable="true" spellcheck="false" dir="ltr"  >
after
</div>

链接地址: http://www.djcxy.com/p/74331.html

上一篇: Contenteditable jumping to the another element when use arrow keys

下一篇: Contenteditable setCursorPos(elem, pos), pos = getCursorPos(elem)