JQuery focus() иногда не работает в IE8

Я разрабатываю webapp используя jQuery. У меня есть функциональность, которая добавляет новую строку из трех полей ввода. После создания этих элементов DOM я хочу сфокусировать одно из полей ввода. Я делаю это с вызовом функции jQuery focus() в нужном поле ввода.

Проблема в том, что вызов focus() отлично работает в IE6 и FF3.5, но не работает в IE8.

Я пытался сделать простой рабочий пример этой проблемы, чтобы показать его здесь, но с разделенной версией кода focus() работает нормально. Поэтому я предполагал, что DOM еще не готов, когда я вызываю focus() в IE8. Для этого я попытался вызвать setTimeout ('myFocus()', 400). У меня был успех, и в некоторых случаях фокус действительно работал, но все же не всегда. Случайно он не фокусирует мое поле ввода.

Вопрос: Кто-нибудь сталкивался с подобными проблемами, и кто-нибудь знает, как обходиться с ним? Использование setTimeout похоже на очень уродливое обходное решение.

Tnx заранее

Отредактировано: 26.08.2009

Преуспеть для воспроизведения на простом примере. Вот код HTML + JS, который воспроизводит эту ошибку в IE8.

<html>
<head>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        function performChanged() {
          formChanged = true;
        }

        function handleChange() {
          var parentDiv = $('#container');
          newValue = $(html).html();

          parentDiv.html(newValue);
          $(".sel1",parentDiv).bind('change',handleChange);
          //alert('Uncomment this and after alert focus will be on input');
          $("input.cv_values",parentDiv).focus();
        }

        $(document).ready(function() {
          $('.trackChange').bind('change', handleChange);
        });
        var html = '<div class=\"div1\">\n<select class=\"sel1\" id=\"sel1\" name=\"sel1\"><option value=\"\"><\/option>\n<option value=\"11\">Select me to see problem<\/option>\n<\/select>\n\n\n<input class=\"cv_values\" id=\"sel3\" name=\"sel3\" size=\"30\" type=\"text\" value=\"\" /><br/>Focus should in input field. With alert it is but without alert focus is not there</div>';
    </script>
</head>
<body>
    <select class="trackChange" onchange='performChanged();'>
      <option value=""></option>
      <option value="1" >Select me to generate new inputs</option>
    </select>

    <div id="container"></div>
</body>

Воспроизведение: 1) выберите значение из первого раскрывающегося списка. Вы увидите, что первый вход работает 2) выберите значение из второго раскрывающегося списка. Вы увидите, что ошибка воспроизводится.

Затем в коде вы можете прокомментировать строку, где отображается JS alert(). Странно то, что если есть это предупреждение(), то после того, как фокус работает нормально.

Надеюсь, это поможет понять, где моя проблема.

P.S. Мне нужно, чтобы мое приложение работало таким образом - оно восстанавливает эти входы после выбора значения из раскрывающегося списка. Это упрощенный пример моего приложения;).

ОТВЕТЫ

Ответ 1

Странно, что у меня была такая же проблема и разрешил ее, используя простой старый javascript:

document.getElementById('friend_name').focus();

Использование эквивалента jQuery $('#friend_name').focus(); не работает в IE8: -/

Ответ 2

У меня была аналогичная проблема с моим приложением, но я не могу воспроизвести проблему фокуса с вашим кодом. Моя проблема была несколько иной в том, что моя страница имела хеш-ссылку, которая заставляла IE не выделять мой элемент.

В любом случае, чтобы обойти проблему, я добавил тайм-аут:

setTimeout(function () {
  $('.my-thing').focus();
}, 100);

Не заметен пользователем, но он дает IE мгновение дышать.

Ответ 3

В связи с решением Kazys, я нашел это, чтобы исправить все мои проблемы (используя файлы IE8 и .HTA):

$("elem").blur();
$("elem").focus().focus();

Я понятия не имею, почему, но почему-то вызов фокуса дважды помогает IE.

EDIT: Я обнаружил, что вызов .show() и .select() также может помочь.

Ответ 4

Имела аналогичную проблему с IE8. Я хотел бы сфокусировать ввод в диалоговом окне, когда он открыт. Используется autoOpen = false. Обратите внимание, что фокус не работает только для первого настраиваемого элемента в диалоговом окне. Пробовал setTimeout, но он работал только иногда. Элемент размытия до фокусировки помог мне.

$('#dialog').find('#name').blur();
$('#dialog').find('#name').focus();

Ответ 5

Поскольку вы не разместили какой-либо код, вы используете:

$(document).ready(function(){
    //code here
});

Это приведет к запуску javascript после загрузки html.

И вы также должны использовать живые события. Когда ваши добавления входов к dom автоматически будут привязаны к фокусу.

$("p").live("focus", function(){
   alert( $(this).text() );
});

Это означает, что каждый созданный p будет привязан к нему.

Ответ 6

Это лучшее решение на данный момент для установки фокуса:

$('. elt'). fadeIn (200, function() {$ ('. elt'). focus();});

Ответ 7

Это старый вопрос, но он находится сверху в поиске, поэтому вам нужно обновить.

Я не знаю, было ли время, когда оно было исправлено, но я снова столкнулся с этой проблемой сегодня в IE11, используя jquery-2.1.3. Я обнаружил, что обертка вызова фокуса в setTimeout, как изложено в Ponny выше, лучше всего подходит для меня.

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