Different behavior in contenteditable (chrome / firefox)

JavaScript
1

Type twice into the box and you’ll see the differences. What is the reason?

https://codepen.io/codearelm/pen/mdRQPaZ

The behavior I want is Chrome’s.

3

Chrome:

  • type in one character in the box and a child div is created inside the box with the character in it.
  • type in a second character and it goes into the same child div

Firefox:

  • type in one character in the box and a child div is created inside the box with the character in it.
  • type in a second char and the char goes outside of the child div and directly into the parent

Chrome’s behavior is what I expect.

4

Yeah, I think there used to be an issue with FF’s implementation of this. I would have assumed it was fixed by now, but maybe not.

MDN seems to think it should work. There is further discussion here.

In general, there are issues from time to time with how browsers implement things. It’s gotten a lot better than it used to be, but still…

I it possible to use an input? I think that would be a more standard approach.

1 Like
5

I just noticed that if I hit the down key right before typing the second character in FF, it will work correctly. Now I just have to figure out how to simulate hitting the down arrow key.

As for using the input. I’m not sure. I think that would lead to flashing since the input event would run AFTER the text is in the box. The other big benefit of using beforeinput is that its data property will be null if a non-character key was pressed, which helps with a lot of things.

EDIT: I got it, problem solved

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.