focus()不在safari或chrome中工作

我有一个已经给出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(''); $("#toInput").focus(); } 

关于这一点的另一个奇怪之处是,跳转到div会触发div.focus()函数并正确地给出输入焦点…它只是失败的点击。 我尝试在div上放置一个.click()函数来做与焦点相同的操作,但它不起作用。

我自己得到了答案……它可能看起来很脆弱,而且太简单……但它确实有效。

准备好这个真棒..?

只需在焦点上添加一个0的计时器…由于某种原因,它只是给它足够的时间将输入完全加载到DOM中。

 function recipientDivHandler(code, element){ $("#recipientsDiv").append(''); setTimeout(function(){$("#toInput").focus();},0); } 

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

虽然我无法在任何地方找到这个具体说明,但.focus()仅适用于输入元素和链接。 Chrome和Safari中也不支持此function。 我在这里发布了一个演示 ,向您展示我的意思。 另请注意, focus()focusin() (v1.4)具有相同的结果。

所以确定后,尝试将您的function更改为.click()

 $("#recipientsDiv").click(function(e){ ... }) 

将’toInput’的tabIndex设置为0或更高,它是一个已知的Chrome错误:

http://code.google.com/p/chromium/issues/detail?id=467043

您的问题很可能是您没有附加DOM对象,而是将明确的HTML附加到您的页面 – 我怀疑Safari是在幕后更新DOM。

尝试使用像document.createElement()这样的实际DOM方法将您的input附加到DOM,如许多地方(例如此处或此处或此处 )所述,然后查看Safari问题是否仍然存在。

所有这一切,你描述问题的方式 – 例如点击而不是标签 – 会争辩说问题不会是这样……所以现在我很好奇。 (无论如何,使用DOM方法实际上是添加元素的正确方法,因此无论如何都要做到这一点并不是一个坏主意。)

根据html 4.01标准 ,tabindex不适用于div。

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

 -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; 

结果是在Chrome中我甚至无法输入文本…在Firefox中它是可能的