focus（）在Safari或Chrome中不起作用

Question

我有一个已赋予tabindex的div，当该div聚焦（单击或制表到）时，它会执行以下操作：

将输入插入自身，给出输入焦点

这在FF，IE和Opera中非常有用

但是在Chome / 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();
}

另一个奇怪的地方是，切换到div将触发div.focus（）函数并正确地赋予输入焦点……只是单击失败。我尝试将.click（）函数放在div上以执行与焦点相同的操作，但是它不起作用。

Answer 1

我自己得到了答案，它似乎很虚弱，而且太简单了，但是可以用。

已经准备好了。.>]

只需向焦点添加一个计时器0 ...由于某种原因，它只给它足够的时间来将输入完全加载到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);
}
如果其他人可以进一步解释这个问题或有更好的答案，请随时上台：-）

Answer 2

尽管我在任何地方都找不到明确说明的内容，但.focus()仅适用于输入元素和链接。 Chrome和Safari也未正确支持该功能。我张贴了demo here来告诉我我的意思。还请注意focus()和focusin()（v1.4）具有相同的结果。

Answer 3

将'toInput'的tabIndex设置为0或更高，这是一个已知的Chrome错误：

Answer 4

您的问题可能是您没有附加DOM对象，而是将显式HTML附加到页面上-我怀疑Safari正在幕后更新DOM。

Answer 5

根据html 4.01 standard，tabindex不适用于div。

Answer 6

我在最新的chrome版本中遇到了类似的问题，发现在我的css中有以下内容重置