focus() 在 safari 或 chrome 中不起作用

IT技术 javascript jquery focus keystroke dynamic-forms
2021-02-22 05:06:37

我有一个已被赋予 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() 函数来做与焦点相同的事情，但它不起作用。

6个回答

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

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

只需在焦点上添加一个 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);
}

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

.focus()早setTimeout在没有在每个浏览器中运行的情况下，这太疯狂了:(
2021-04-24 05:06:37
类似的问题 - 输入元素已经在 DOM 中，我正在向它添加一个焦点/模糊处理程序，然后在它上面调用焦点。除非我像您建议的那样使用 settimeout ，否则不会在 Chrome 中触发处理程序（尽管它实际上是在聚焦）。
2021-05-21 05:06:37

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

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

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

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

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

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

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

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

我的观点是他有一半在使用 jQuery —— 他用它来选择对象，然后附加原始 HTML 而不是其他 jQuery 对象。
2021-04-22 05:06:37
我不认为你在这方面完全走在正确的轨道上。Append 实际上解析内容并构建文档片段。它正在操纵 DOM。
2021-04-25 05:06:37
或者使用 jQuery 来解决浏览器不一致的问题。
2021-05-18 05:06:37

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

我不认为这可能是问题，否则制表符也无法正常工作。只是点击不起作用。
2021-05-09 05:06:37
其它你可能感兴趣的问题
上一篇使用 JavaScript 减少函数对数组进行排序 下一篇如何在 ES6 module中导入部分对象