focus () не работает в Safari или Chrome

Question

У меня есть div, которому дан tabindex, когда 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 () и правильно выделяться фокус ввода ... это просто щелчок, который не срабатывает. Я попытался поместить функцию .click () в div, чтобы сделать то же самое, что и фокус, но он не работает.

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

установить tabIndex 'toInput' в 0 или выше, это известная ошибка Chrome:

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

Answer 3

Хотя я нигде не смог найти это специально оговоренное, .focus() работает только с элементами ввода и ссылками. Это также не поддерживается должным образом в Chrome и Safari. Я разместил демо здесь , чтобы показать вам, что я имею в виду. Также обратите внимание, что focus() и focusin() (v1.4) имеют одинаковые результаты.

Чтобы определить, попробуйте изменить свою функцию на .click()

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

Answer 4

Вероятно, ваша проблема в том, что вы не добавляете объект DOM, вы добавляете явный HTML-код на свою страницу - и я сомневаюсь, что Safari обновляет DOM за кулисами.

Попробуйте использовать фактические методы DOM, такие как document.createElement(), чтобы добавить свой 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 это было возможно