在Safari或Chrome中，focus()不起作用

Question

在Safari或Chrome中，focus()不起作用

javascriptjqueryfocuskeystrokedynamic-forms

25

我有一个 div 标签添加了 tabindex 属性，当该 div 被聚焦（例如点击或使用 Tab 键）时，会执行以下操作：

向 div 中插入一个 input 元素并将其聚焦

在 Firefox、IE 和 Opera 浏览器中，这个功能都能正常工作。

但在 Chrome/Safari 浏览器中，它虽然能让 input 元素获得焦点，但光标却没有进入 input 元素（我知道它已经获得了焦点，因为 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();
}

另一个奇怪的事情是，通过Tab键切换到div上会触发div.focus()函数并正确地将焦点放在输入框上…只是点击时会出现问题。我尝试在div上添加.click()函数来执行与焦点相同的操作，但这并不起作用。

- BinarySolo00100

我以为Safari不支持tabindex？ - prodigitalson

2

你能展示一下你编写的代码来实现上述所有内容吗？如果没有看到它，我们只会猜测。 - delfuego

原始帖子已经编辑，代码片段已大幅缩短，这就是正在发生的事情的要点... - BinarySolo00100

6个回答

3

虽然我没有在任何地方找到明确说明，但是.focus()只适用于输入元素和链接。而且在Chrome和Safari中也没有得到很好的支持。我在这里发布了一个演示来展示我的意思。另外请注意，focus()和focusin()（v1.4）具有相同的结果。

因此，尝试将您的函数更改为.click()。

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

- Mottie

3

将'toInput'的tabIndex设置为0或更高，这是一个已知的Chrome错误：http://code.google.com/p/chromium/issues/detail?id=467043。

- xamiro

2

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

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

所有这些都说了，你描述的问题出现的方式——例如点击但不是选项卡——会说明问题不会是这样的......所以现在我很好奇。（无论如何，使用DOM方法确实是添加元素的正确方法，因此执行此操作并不是坏主意。）

- delfuego

或者使用jQuery来解决浏览器不兼容性问题。 - user213154

我的观点是他有一半在使用jQuery - 他使用它来选择对象，但随后附加原始HTML而不是其他jQuery对象。 - delfuego

1

我认为你对此并不完全正确。Append实际上解析内容并构建文档片段。它正在操作DOM。 - Zack The Human

1

根据HTML 4.01标准，tabindex不适用于div元素。

- user213154

我认为这不可能是问题，否则制表符也不会正常工作。只是点击无效。 - BinarySolo00100

0

我在最新版本的Chrome中遇到了类似的问题，后来发现我的CSS重置中有以下内容

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

结果是在Chrome中我甚至无法输入文本... 而在Firefox中是可以的

- Master Yogurt

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BinarySolo00100 · Accepted Answer

我自己找到了答案，可能看起来不太牢固，太简单，但它有效。

准备好迎接这个绝妙方法了吗？

只需在聚焦时添加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);
}

如果有其他人能够进一步解释或提供更好的答案，请随意发言 :-)