Contenteditable jumping to the another element when use arrow keys
If contenteditable have span element at the end of the text and when using arrow keys its jump to another contenteditable.
For example; I'm moving arrow keys on the second contenteditable when my cursor came at the and cursor jump to the third contenteditable section. But cursor must stay in second section.
<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>
And this is jsfiddle link;
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>