double click to select text in contenteditable element, not working as expected

Viewed 241

I want contenteditable divs to behave in the same way as a normal input box does.

When you double click on an input box it will select either the word that the mouse is over or if the mouse is to the right of the text it will select the last word.

When using an element with 'contenteditable=true' this works the same if you double click on a word, but if you double click to the right of it it doesn't select the last word as expected.

However, if it's the last element it does work the same as input, and selects the last word.. go figure?

example - https://jsfiddle.net/mpwaw/a34yq81n/19/

<input value="normal input">
<div contenteditable=true spellcheck="false">contenteditable div</div>
<div contenteditable=true spellcheck="false">contenteditable div</div>
<div contenteditable=true spellcheck="false">contenteditable div</div>

The input at the top works fine

And the last of the contenteditable's works fine too

But all the others don't

If i put an empty div at the bottom, then this stops the last contenteditable from working

Is this a bug, or is it designed this way? Or am i missing something?

Thanks

0 Answers
Related