focus()不在safari或chrome中工作

Question

我有一个已经给出tabindex的div,当div被聚焦时(单击或选项卡)它执行以下操作:

将输入插入其自身,给出输入焦点

这在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();
}

关于这一点的另一个奇怪之处是,跳转到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);
}

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