javascript - focus() 在 Safari 或 chrome 中不起作用

Question

我有一个已被赋予 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() 函数来执行与焦点相同的操作，但它不起作用。

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);
}

如果其他人可以进一步解释这一点或有更好的答案，请随时上台:-)