Question

I’m writing a JavaScript chatting application, but I’m running into a minor problem.

Here is the HTML structure:

<div id="chat">
    <div id="messages"></div>
    <textarea></textarea>
</div>

When the user clicks/focuses on the chat box, I want the textbox to be automatically focused. I have this onfocus handler on the chat box:

chat.onfocus = function () {
    textarea.focus();
}

This works, but the problem is that in Firefox, this makes it impossible to select text in the messages div, since when you try to click on it, the focus shifts to the textarea. How can I avoid this problem?

(Semi-related issues: In Chrome, textarea.focus() doesn’t seem to shift the keyboard focus to the textarea; it only highlights the box. IE8 does not seem to respond to the onfocus at all when clicking, even if it tabindex is set. Any idea why?)

Answer 1

I’ve found a solution to automatically select a textarea when clicking on the chat while still being able to select text: simply change div into label.

<label id="chat" style="display: block">
    <div id="messages"></div>
    <textarea></textarea>
</label>

Unfortunately, Firefox has a bug where it overcorrects and forces label to be inline, but this can be fixed by dynamically creating it using JavaScript.