Firefox cursor is invisible, becomes visible when you click on anything else

Question

I have an absolutely strange error that I have ever encountered, and I'm close to that. Anyone who has ideas on how to debug this (or any smart workarounds) will be awesome.

Problem:

I am making a simple WYSIWYG editor in Firefox using contenteditable. The problem occurs when I load text for editing through ajax. Before loading, the cursor is displayed in order (for a split second), and after loading the text, it disappears. You can still enter text, and the cursor definitely remains “there” (the status field shows the current line / col is just fine), but the cursor does not appear and the selection overlay does not appear.

Here's what makes it really strange: by clicking ANYWHERE on any other dom element, on firebug, even in another window, it returns the cursor and behaves as usual. In fact, the only time the cursor has any problems is at the very beginning when the page initially loads or refreshes. Clicking anywhere inside the contentedtiable div does not fix it - you need to click outside so that it refreshes.

Right now, I just need a workaround. I tried 500 variants of $ (someelement) .click or $ (somelement) .focus, but they do not fully replicate the "actual" click from the user.

Has anyone seen anything like this before? Thank you

Answer 1

Well, I didn't find out what was causing the problem, but I found that a quick and dirty fix does the trick. I just add the anchor tag to the DOM, focus it (using jQuery.focus), and then remove it.

I tried. Focus many times before, but I always tried it on div or li elements that didn't do this trick. It must be an anchor tag. I suspect this because the anchor tag actually has some kind of visible component for its focus, which resets something in the internal cursor display mechanism of Firefox.

In any case, if you are trying to solve such problems, and this does not fix it, look at MorganTiley's explanation - this can give you good results.

Answer 2

This is due to the fact that when you load the content, you change the structure of the html nodes and thereby invalidate the selection (the cursor is just a collapsed selection). I recommend trying reset through Rangy . It works well in conjunction with jquery. Use jquery to get the first element in the contentEditable area, for example. first paragraph, then create a new rangy range and select this item (node) and collapse to start. This will place the cursor at the beginning of your content. Here is sample code

$(document).ready(function() { //init rangy }); function ajaxLoaded { var p = $(".contenteditablediv p:first")[0]; var sel = rangy.getSelection(); sel.collapse(p, 0); }