Question

I am having trouble focusing on a textarea on a webpage which uses jquery and bootstrap. It should be a trivial job but I don’t see why it doesn’t work the way it it supposed to.

$('#textarea').focus();

By default, bootstrap gives a blue glow to a focused area (see http://twitter.github.com/bootstrap/base-css.html?#forms). Unfortunately, the line above doesn’t seem to do the job.

To be more specific, I have a button which opens displays a side-pane with an editor (textarea). My aim is to automatically send the focus to the textarea after displaying the pane.

Answer 1

I just tested $("#input01").focus(); on the bootstrap page you referenced. Works fine to focus the input with id input01, which turn blue. So this says to me focusing on an input element that is styled by bootstrap works fine. In fact the blue glow you see is just based on the css :focus selector in bootstrap’s styles, so as long as you correctly select the element the styles should work fine.

My guess is your focus() call is either using the wrong jQuery selector, or is perhaps running out of sync with what else is going on on the page, such as the showing of the side-pane. Make sure the #textarea element exists before selecting it.

If you post more specific code I could help you with more specific answers.