focus () не работает в safari или chrome

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

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

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

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

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

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

спасибо заранее!

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

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

21
dynamic-forms focus javascript jquery keystroke

6 ответов

Я получил ответ самостоятельно...это может показаться слабым и слишком простым...но это работает.

готов к этой удивительности..?

просто добавьте таймер 0 в фокус...по некоторым причинам это просто дает ему достаточно времени, чтобы полностью загрузить вход в дом.

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);
}

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

24

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

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

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

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

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

3

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

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

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

2

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

1

Я получил аналогичную проблему с последней версией chrome, и я узнал, что у меня в моем css-reset следующее

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

в результате в chrome я даже не мог вводить текст... в firefox это было возможно

0