focus() not working in safari or chrome

ⅰ亾dé卋堺 提交于 2019-11-27 09:02:09

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){ ... })

set the tabIndex of 'toInput' to 0 or higher, its a known Chrome bug:

http://code.google.com/p/chromium/issues/detail?id=467043

Your problem is likely that you're not appending a DOM object, you're appending explicit HTML to your page -- and I doubt that Safari is updating the DOM behind the scenes.

Try to use the actual DOM methods like document.createElement() to append your input to the DOM, as described in a number of places (such as here or here or here), and then see if the Safari problem persists.

All that said, the way that you describe the issue arising -- on clicks but not tabs, for example -- would argue that the problem isn't going to be this... so now I'm curious. (In any event, using DOM methods is really the right way to add elements, so it's not a bad idea to do it anyway.)

according to the html 4.01 standard, tabindex does not apply to divs.

I got a similar problem with the latest chrome release, and I found out that I had in my css-reset the following

-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-o-user-select: none; 
user-select: none;

the result was that in chrome i couldn't even input text... in firefox it was possible

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!