focus() not working in safari or chrome
set the tabIndex of 'toInput' to 0 or higher, its a known Chrome bug:
http://code.google.com/p/chromium/issues/detail?id=467043
I got the answer on my own, it might seem weak, and too simple, but it works.
Ready for this awesomeness..?
Just add a timer of 0 to the focus...for some reason it just gives it enough time to fully load the input into the DOM.
function recipientDivHandler(code, element) {
$("#recipientsDiv").append('<input type="text" id="toInput" class="inlineBlockElement rightSpacer" style="border:0px none #ffffff; padding:0px; width:40px;margin-bottom:3px;padding:0; overflow:hidden; font-size:11px;" />');
setTimeout(function() {
$("#toInput").focus();
}, 0);
}
If someone else can further explain this or has a better answer please feel free to take the stage :-)
Although I couldn't find this specifically stated anywhere, .focus()
only works on input elements and links. It also isn't supported properly in Chrome and Safari. I posted a demo here to show you what I mean. Also note that focus()
and focusin()
(v1.4) have the same results.
So that being determined, try changing your function to .click()
$("#recipientsDiv").click(function(e){ ... })