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

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 也沒有正確支持它。 我在這里發布了一個演示來向你展示我的意思。 另請注意， focus()和focusin() (v1.4) 具有相同的結果。

確定后，嘗試將您的功能更改為.click()

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

Answer 3

將 'toInput' 的 tabIndex 設置為 0 或更高，這是一個已知的 Chrome 錯誤：

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

Answer 4

您的問題很可能是您沒有附加 DOM 對象，而是將顯式 HTML 附加到您的頁面——我懷疑 Safari 是否在幕后更新 DOM。

嘗試使用諸如document.createElement()類的實際 DOM 方法將您的input附加到 DOM，如許多地方所述（例如此處或此處或此處），然后查看 Safari 問題是否仍然存在。

綜上所述，你描述出現的問題的方式——例如，點擊而不是標簽——會爭辯說問題不會是這個......所以現在我很好奇。 （無論如何，使用 DOM 方法確實是添加元素的正確方法，因此無論如何這樣做也不錯。）

Answer 5

根據html 4.01 標准，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 中這是可能的