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

Question

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

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

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

Answer 3

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

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

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

Answer 4

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

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

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

Answer 5

У меня аналогичная проблема с последней версией хрома, и я узнал, что я что в моем CSS-сброс следующей

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

результат в том, что в хроме я даже не ввод текста ... в Firefox можно было

Answer 6

s эт TabIndex из 'toInput' до 0 или выше, его известным Chrome ошибка:

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