我有一个div,它被赋予了tabindex,当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()函数并正确地给出输入焦点……只是点击失败了。我尝试将.click()函数放在div上,以执行与焦点相同的操作,但它不起作用。
发布于 2010-01-20 13:57:07
我自己得到了答案,它可能看起来很弱,也太简单了,但它是有效的。
准备好迎接这场奇妙的表演了吗?
只需将计时器0添加到focus...for中,这样就有足够的时间将输入完全加载到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);
}
如果其他人可以进一步解释或有更好的答案,请随时上台:-)
发布于 2010-01-18 06:11:32
虽然我在任何地方都找不到这一点,但.focus()
只适用于输入元素和链接。它在Chrome和Safari中也不受支持。我发布了一个demo here来告诉你我的意思。还要注意,focus()
和focusin()
(v1.4)具有相同的结果。
因此,确定后,尝试将函数更改为.click()
$("#recipientsDiv").click(function(e){ ... })
发布于 2015-08-17 19:29:28
将'toInput‘的tabIndex设置为0或更高,这是一个已知的Chrome错误:
https://stackoverflow.com/questions/2074347
复制相似问题