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

如果其他人可以进一步解释或有更好的答案，请随意上台： - ）

Answer 2

虽然我无法在任何地方找到此明确说明，但.focus()仅适用于输入元素和链接。 Chrome和Safari中也不支持此功能。我发布了一个demo here来告诉你我的意思。另请注意，focus()和focusin()（v1.4）具有相同的结果。

确定后，请尝试将您的功能更改为.click()

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

Answer 3

设置tabIndex为＆＃39; toInput＆＃39;为0或更高，它是一个已知的Chrome bug：

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

Answer 4

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

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

所有这一切，你描述问题的方式 - 例如点击而不是标签 - 会争辩说问题不会是这样......所以现在我很好奇。（无论如何，使用DOM方法实际上是添加元素的正确方法，所以无论如何都要这样做。）

Answer 5

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

Answer 6

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

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

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

focus（）不在safari或chrome中工作

6 个答案: