WYMEditor HTML Textarea Loses Focus

Posted by Robert on the 24th of January, 2008 at 10:59 AM GMT0. Permalink.
Tags: CSS, Geek, HTML, WYMEditor

The following is an advertisement.

When I posted this, I was listening to: Placebo - Teenage Angst

I've been using the WYMEditor on a little content management system I've been building at work. I was having a problem where I couldn't edit in the HTML editor. Every time I clicked, the HTML textarea in WYMEditor would lose focus.

It turns out the problem was the way I used my label for the textarea that turns into the WYMEditor. There are two ways to use label. One is to tie the element to a form element via for="element-id" where element-id is the id of the form element. The other is to simply encapsulate the form element inside the label. I was doing the latter since I had written CSS to display forms.

labels focus the corresponding element when clicked (or when elements inside them are clicked). If you click the element directly, the focus doesn't change. What I was failing to realize was that WYMEditor was putting the replacement / overlay inside the label. The visual editor itself uses an iframe, which overrides the label. The HTML Editor portion uses another textarea. In FireFox, when I clicked the textarea to edit, the focus would shift to the hidden (and first in the code) textarea.

The solution was to use the for method instead of the encapsulation method for WYMEditors and modify my CSS.

Add this page to del.icio.us or email it.

Comments on this page are closed due to age. If you need to say something, e-mail me.