OS: Linux Mint 18.3, Firefox 72.
I've explored this phenomenon and I find it exists only in FF, not in Chrome (for example).
This problem applies, in general, to elements (perhaps DIV
or TD
) when their global attribute contentEditable has been set to true
.
You can see the problem for yourself if you go here, get that HTML + JS and run it in your browsers.
The specific problem, when you load that file, can be seen if you put the cursor after "ipsum" and then press Ctrl-Backspace, to delete the word "ipsum". The result seems OK: when you see the cursor blinking after that, it appears that there is a trailing space after "Lorem". But when I then type some letter after that it gets stuck to "Lorem"... e.g. I type "m" and I see "Loremm".
This is not how it works with that same HTML file in Chrome: there, when I type "m", I see "Lorem m".
Even more strangely, when I type more words, in Firefox, after "Lorem ipsum" ... and then use Ctrl-Backspace and start typing, the problem does not occur: trailing white space is preserved properly.
There is another thing I've observed in FF: if, instead of going Ctrl-Backspace, I repeatedly go Backspace, i.e. letter-by-letter, until I've deleted "ipsum", leaving the trailing space. And if I then start typing ... trailing white space is preserved.
I have gone to the extent of writing a MutationObserver to see what's happening here and whether there's a possible workaround. The problem is that the FF browser in fact does this trimming before the MutationObserver
fires any event.
There is a possible workaround which I'm working on, which is to trap the key event, and if it is "Ctrl + Backspace" to do event.preventDefault()
. This does indeed stop the word-deletion occurring. I'd then have to implement a substitute solution, involving perhaps deleting letter-by-letter until I find white space.
This looks like a bug to me.
Here's a possible clue to what this might be about: when I first trap this event (i.e. on Ctrl-Backspace) and examine the event.target
, I find that the innerHTML
is correct, i.e. has a trailing space, but that the innerText
is incorrect, i.e. the trailing space has been trimmed. I have done a bit of reading about this, and it appears that innerText
is, so they say, primarily concerned with "how some text is presented on the page".