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


javascript focus jquery keystroke dynamic-forms
person BinarySolo00100    schedule 15.01.2010    source источник
comment
Я думал, что сафари не поддерживает tabindex?   -  person prodigitalson    schedule 15.01.2010
comment
Можете ли вы показать нам код, который вы написали для достижения всего вышеперечисленного? Не видя этого, мы бы только догадывались.   -  person delfuego    schedule 15.01.2010
comment
Исходный пост отредактирован с сильно укороченным фрагментом кода, это суть того, что происходит...   -  person BinarySolo00100    schedule 16.01.2010

Ответы (6)


arrow_upward
29
arrow_downward

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

Готовы к этому великолепию..?

Просто добавьте в фокус таймер 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);
}

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

person BinarySolo00100    schedule 20.01.2010
comment
Аналогичная проблема - элемент ввода уже был в DOM, и я добавлял к нему обработчик фокуса/размытия, а затем вызывал на нем фокус. Обработчик не запускался в Chrome, если только я не использовал settimeout, как вы предложили (хотя на самом деле он фокусировался). - person Mayo; 26.04.2011
comment
Это безумие, .focus() раньше работало без setTimeout в каждом браузере :( - person Pranav Singh; 06.09.2017

arrow_upward
3
arrow_downward

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

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

$("#recipientsDiv").click(function(e){ ... })
person Mottie    schedule 17.01.2010

arrow_upward
3
arrow_downward

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

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

person xamiro    schedule 17.08.2015

arrow_upward
2
arrow_downward

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

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

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

person delfuego    schedule 16.01.2010
comment
Или используйте jQuery, чтобы обойти несоответствия браузера. - person ; 17.01.2010
comment
Я хочу сказать, что он наполовину использует jQuery — он использует его для выбора объекта, но затем добавляет необработанный HTML, а не другие объекты jQuery. - person delfuego; 17.01.2010
comment
Я не думаю, что ты на правильном пути с этим. Append фактически анализирует содержимое и создает фрагмент документа. Он манипулирует DOM. - person Zack The Human; 20.01.2010

arrow_upward
1
arrow_downward

согласно стандарту HTML 4.01, tabindex не применяется к элементам div.

person Community    schedule 15.01.2010
comment
Я не думаю, что это может быть проблемой, иначе вкладка тоже не будет работать правильно. Вот только щелчок не работает. - person BinarySolo00100; 16.01.2010

arrow_upward
0
arrow_downward

У меня возникла аналогичная проблема с последней версией Chrome, и я обнаружил, что в моем css-reset было следующее

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

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

person Master Yogurt    schedule 11.02.2012