3

I've been developing a web-ui for a while and it has become now quite complex. At a certain place I use a <div contenteditable="true"> for editing text, and there is a bug in FireFox, which I cannot trace down:

When there is some text in the div, and I click with my mouse to change cursor position, it doesn't work. The cursor is always in the end of the text. It works fine in other browsers, and you can change cursor in FF using arrow keys.

I tested a simple html page with a single element <div contenteditable="true"> in it in FireFox, and it works fine, but doesn't work on my system. Obviously, there is something that blocks it.

What can be a possible issue?

Thanks!

Michael Zelensky
  • 2,012
  • 3
  • 29
  • 37

2 Answers2

4

I had the same issue and finally found that the issue in my case was CSS wise. I had:

-moz-user-select: none;

on a parent element of my contenteditable which caused the problems.

It worked well after I applying:

-moz-user-select: element;

NOTE: depending on which select behavior you want to have, choose the user-select value (https://developer.mozilla.org/en-US/docs/Web/CSS/user-select)

Neithan Max
  • 11,004
  • 5
  • 40
  • 58
robsi
  • 41
  • 6
1

for me it didn't work because on the parent div is a drag & drop implemented. and it effects all input-fields, textareas and div's with contenteditable.

I haven't found a solution for it yet but there is already a Bug Ticket for Firefox with the right hint that draggable makes the problem.

Here is a link to the bug: https://bugzilla.mozilla.org/show_bug.cgi?id=419808#c4

Here is a way to fix this problem: Prevent drag event to interfere with input elements in Firefox using HTML5 drag/drop

Community
  • 1
  • 1
sanyooh
  • 1,260
  • 2
  • 18
  • 31