A directory of browser-based WYSIWYG editors


Home: htmlArea 3 (beta): htmlArea 2 & 3 archive (read only): htmlArea v3.0 - Discussion:
(re-)Focus problems with Mozilla

The htmlArea 2 & 3 editors have been discontinued.

We've made these forums available as a read-only reference and knowledge-base for people using or developing editors based on htmlArea 2 or 3.

Anyone who is interested in taking over version 2 or 3 is free to do so. All we ask is that you choose a new name that doesn't have "htmlarea" in it to avoid confusion with this site. We'll even give you a link in the directory to make it easier for people to find you. If you are developing or hosting an htmlArea based-editor under a new name, please submit it to our directory.


New User

Dec 14, 2004, 2:29 PM

Post #1 of 4 (6050 views)
(re-)Focus problems with Mozilla Can't Post

It seems there are problems with getting focus with htmlArea and Mozilla.
For example when showing HtmlArea after having hidden it previously. Or in when reloading the page itself.

I put a live demo of such a configuration an a web page, together with explanations of the behaviour:

Maybe someone had similar problems and has found a solution? That would be very niiiiiiiice.


New User

Dec 20, 2004, 9:39 AM

Post #2 of 4 (5959 views)
Re: [kris] (re-)Focus problems with Mozilla [In reply to] Can't Post

Anyone sees the above demo bahaving correctly on firefox/mozilla? Please let me know because that's already a hint...

Thank you!


Dec 20, 2004, 12:49 PM

Post #3 of 4 (5948 views)
Re: [kris] (re-)Focus problems with Mozilla [In reply to] Can't Post


I had the same problem. I am trying to make an webpage creation interface with a preview, design tab and some other tabs.

Gecko browsers have some wierd issues with designmode and CSS display. It seems that in gecko browsers, css "display : none"
doesn't just prevent the element from being seen keeping things otherwise normal (form elements are still available via JS, etc). Gecko browsers seem to reload the iframe. This can be seen via putting an iframe with onLoad="alert('LOADING')" inside a div and toggle the divs display properties. Everytime the div comes out of display : none, the onLoad will fire.

However, it seems like the content of the iframe is not RELOADED.

Likewise, when the iframe loads, designMode is turned off, probably as some sort of security feature.

So the combo of all this is what you are running into.

When you switch between tabs, designMode is turned off. Therefore, the body of the iframe is not editable nor accessable (which throws the editor._doc error). This is not an issue when the first tab displayed is the one with HTMLArea. This is because onLoad, you init the editor and HTMLArea itself enables designMode. However, when you switch between tabs, the designMode is turned off via the browser and something like initEditor is not being called to turn it back on.

The solution is to turn designMode when you switch between tabs.

Here is a code snippet.

//Global vars...
design_win_already_loaded = false;
tab_onload = new Array(); //array to hold functions to be called when you click on a tab.

tab_onload['design'] = function() {
if (design_win_already_loaded) {
var editors = window.frames['design_window'].editors;
for(var i in editors){
editors._doc.designMode = "on";
else {
design_win_already_loaded = true;

onClick of your editor tab and AFTER you set the div containing HTML area to display:block, call


If you don't call it after you set the display, you will get the same error you are getting now in most cases. I threw in the "design_win_already_loaded" var as a hack to make sure HTMLArea is loaded, which is not the case sometimes when your initial tab is the one CONTAINING HTMLArea. A setTimeout might work here too.

I have my design tab containing an iframe that has page that contains multiple HTMLAreas. That is why i am doing the loop through each editor. Inside that page i have an array of editors. You should be able to do something similar.

Hope that helps someone.

Perhaps a good feature for HTMLArea 3.0 would be a functon like

editor.make_sure_editor_is_editable() which just makes sure design mode is turned on.
Blaine Garrett
Chief Web Applications Developer
JR Computer Associates INC

New User

Dec 22, 2004, 5:01 AM

Post #4 of 4 (5871 views)
Re: [blainegarrett] (re-)Focus problems with Mozilla [In reply to] Can't Post

Thanks a lot !
That definetely solved the probelm!



Search for (options)