focus() 在 Safari 或 chrome 中不起作用
我有一个已被赋予 tabindex 的 div，当该 div 获得焦点（单击或按 Tab 键切换到）时，它会执行以下操作：
将输入插入到自身中， 提供输入焦点，
这在 FF、IE 和 Opera 中效果很好，
但在 Chome/Safari 中，它提供输入焦点，但无法实际将光标放入输入中（我知道它提供焦点，因为 safari/chrome 焦点边框出现）。
对于发生的事情有什么建议吗？
之后我必须修复按键处理程序，以便箭头键和退格键也能工作，如果您愿意，请随意加入。
先感谢您！
下面是代码示例：
var recipientDomElem = $("#recipientsDiv");
recipientDomElem[0].tabIndex = 0;
$("#recipientsDiv").focus(function(e){
var code = (e.keyCode ? e.keyCode : e.which);
window.clearTimeout(statusTimer);
recipientDivHandler(code, null);
});
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;" />');
$("#toInput").focus();
}
另一个奇怪的地方是，按 Tab 键切换到 div 将触发 div.focus() 函数并正确给出输入焦点...只是单击失败了。我尝试在 div 上放置 .click() 函数来执行与焦点相同的操作，但它不起作用。
I have a div that has been given a tabindex, when the div is focused(click or tabbed to) it does the following:
inserts an input into itself,
gives the input focus
this works great in FF, IE and Opera
but in Chome/Safari it gives the input focus but fails to actually put the cursor inside the input (I know it gives it focus because the safari/chrome focus borders appear).
Any suggestions as to what is going on?
I have to fix the key handler after this so the arrow keys and backspace keys work too, feel free to chime in on that if you'd like.
Thank you in advance!
Here's a sample of the code:
var recipientDomElem = $("#recipientsDiv");
recipientDomElem[0].tabIndex = 0;
$("#recipientsDiv").focus(function(e){
var code = (e.keyCode ? e.keyCode : e.which);
window.clearTimeout(statusTimer);
recipientDivHandler(code, null);
});
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;" />');
$("#toInput").focus();
}
Another oddity about this is that tabbing through to the div will fire the div.focus() function and correctly give the input focus...it's just the click that fails. I tried putting a .click() function on the div to do the same as the focus, but it's not working.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
我自己得到了答案，它可能看起来很弱，而且太简单，但它有效。
准备好迎接这令人敬畏的事了吗..？
只需添加一个计时器 0 到焦点...出于某种原因，它只是给了它足够的时间来将输入完全加载到 DOM 中。
如果其他人可以进一步解释这一点或有更好的答案，请随时上台:-)
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.
If someone else can further explain this or has a better answer please feel free to take the stage :-)
尽管我在任何地方都找不到具体说明，但
.focus()仅适用于输入元素和链接。 Chrome 和 Safari 也无法正确支持它。我在此处发布了一个演示来向您展示我的意思。另请注意，focus()和focusin()(v1.4) 具有相同的结果。因此，确定后，尝试将函数更改为
.click()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 thatfocus()andfocusin()(v1.4) have the same results.So that being determined, try changing your function to
.click()将“toInput”的 tabIndex 设置为 0 或更高，这是一个已知的 Chrome 错误：
http://code.google.com/p/chromium/issues/detail?id=467043
set the tabIndex of 'toInput' to 0 or higher, its a known Chrome bug:
http://code.google.com/p/chromium/issues/detail?id=467043
您的问题可能是您没有附加 DOM 对象，而是将显式 HTML 附加到您的页面 - 我怀疑 Safari 是否在幕后更新 DOM。
尝试使用实际的 DOM 方法，如
document.createElement()将您的input附加到 DOM，如许多地方所述（例如 此处 或 此处 或 此处），然后查看 Safari 问题是否仍然存在。话虽如此，您描述问题的方式（例如，点击而不是选项卡）会认为问题不会是这样的......所以现在我很好奇。 （无论如何，使用 DOM 方法确实是添加元素的正确方法，所以无论如何这样做也不是一个坏主意。）
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 yourinputto 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.)
根据 html 4.01 标准，tabindex 不适用于 div。
according to the html 4.01 standard, tabindex does not apply to divs.
我在最新的 chrome 版本中遇到了类似的问题，我发现我在 css-reset 中出现了以下
结果，在 chrome 中我什至无法输入文本...
在火狐中这是可能的
I got a similar problem with the latest chrome release, and I found out that I had in my css-reset the following
the result was that in chrome i couldn't even input text...
in firefox it was possible