CODEWITHSUNDEEP
javascripthtmlgoogle-chromechromebug
riccio82
riccio82

Reputation: 126

Move the cursor with the right arrow between two uneditable span inside an editable div

<div contenteditable="true">
Lorem ipsum dolor sit amet,
 <span contenteditable="false" class="locked monad startTag">span</span> 
 <span contenteditable="false">span</span>
consectetur adipiscing elit, sed do eiusmod<span contenteditable="false">span</span> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

I have an editable container with various uneditable spans inside, when I try to move with a cursor between the first two spans with the right arrow this disappears, with the left arrow it works. It's a problem that I found only with Chrome, Safari works correctly. I tried using the window.getSelection() object on the keyDown event to find out if the cursor is before the span and move it, but there was no way.

Has anyone found any solution?

https://jsfiddle.net/riccio82/5qf0jhak/6/

EDIT

I found a solution adding a space inside the span, at the end of the text and another after each span.

But this solution is not acceptable because when I retrieve the text inside the div I have some extra spaces.

https://jsfiddle.net/riccio82/5qf0jhak/26/

Upvotes: 4

Views: 274

Answers (2)

Viktor Vlasenko
Viktor Vlasenko

Reputation: 2502

It looks like a bug in Chrome. You can implement workaround in your code by wrapping multiple spans coming together into <span contenteditable="false">.

Check example code below: 

span {
  color: #767676;
    font-style: italic;
    background-color: #f8e635;
    border-radius: 7px;
    padding: 3px;
}
<div contenteditable="true">
Lorem ipsum dolor sit amet,
<span contenteditable="false">
  <span contenteditable="false" class="locked monad startTag">span</span> 
  <span contenteditable="false">span</span>
</span>
consectetur adipiscing elit, sed do eiusmod<span contenteditable="false">span</span> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

Upvotes: 1

ashik
ashik

Reputation: 157

Just added a line break between the two spans and it seems working

span {
  color: #767676;
    font-style: italic;
    background-color: #f8e635;
    border-radius: 7px;
    padding: 3px;
}
<div contenteditable="true">
Lorem ipsum dolor sit amet,
<span contenteditable="false" class="locked monad startTag">span</span> <!--here -->
<span contenteditable="false">span</span>consectetur adipiscing elit, sed do eiusmod<span contenteditable="false">span</span> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

Upvotes: 0

Related Questions