23

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

4

6 回答 6

31

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

准备好迎接这个令人敬畏的..？

只需将 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);
}

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

于 2010-01-20T05:57:07.470 回答
3

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

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

$("#recipientsDiv").click(function(e){ ... })
于 2010-01-17T22:11:32.447 回答
3

将“toInput”的 tabIndex 设置为 0 或更高，这是一个已知的 Chrome 错误：

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

于 2015-08-17T11:29:27.730 回答
2

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

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

话虽如此，您描述问题出现的方式——例如点击而不是标签——会争辩说问题不会是这样的......所以现在我很好奇。（无论如何，使用 DOM 方法确实是添加元素的正确方法，所以无论如何这样做也不错。）

于 2010-01-16T03:13:42.870 回答
1

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

于 2010-01-15T20:59:34.220 回答
0

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

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

结果是在 chrome 中我什至无法输入文本......在 Firefox 中这是可能的

于 2012-02-11T00:58:36.660 回答