Focus() не работает в сафари или хроме

У меня есть div, которому был дан tabindex, когда div сфокусирован (щелчок или вкладка), он делает следующее:

вставляет ввод в себя, дает фокус ввода

это отлично работает в FF, IE и Opera

но в Chome/Safari он дает фокус ввода, но не позволяет на самом деле поместить курсор внутрь входа (я знаю, что он фокусируется, потому что появляются границы фокуса сафари/хрома).

Любые предложения относительно того, что происходит?

После этого я должен исправить обработчик ключа, так что клавиши со стрелками и клавиши обратного хода тоже работают, не стесняйтесь звонить, если хотите.

Заранее благодарю вас!

Вот пример кода:

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, чтобы сделать то же самое, что и фокус, но он не работает.

Ответы

Ответ 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);
}

Если кто-то еще может объяснить это или лучше ответить, пожалуйста, не стесняйтесь: -)

Ответ 2

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

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

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

Ответ 4

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

Попробуйте использовать фактические методы DOM, например document.createElement(), чтобы добавить ваш input в DOM, как описано в нескольких местах (например, здесь или здесь или здесь), а затем проверьте, сохраняется ли проблема Safari.

Все, что сказано, способ, которым вы описываете возникшую проблему - например, при кликах, но не в вкладах, - будет утверждать, что проблема не будет такой... так что теперь мне любопытно. (В любом случае использование методов DOM - это действительно правильный способ добавления элементов, поэтому в любом случае это не плохая идея.)

Ответ 5

в соответствии с html 4.01 standard, tabindex не применяется к div.

Ответ 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 было возможно