jQuery focus () иногда не работает в IE8 - PullRequest
Новая
       14

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

16 голосов
/ 25 августа 2009

Я занимаюсь разработкой веб-приложения с использованием jQuery. У меня есть функциональность, которая добавляет новую строку из 3 полей ввода. После создания этих элементов 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 (). Странно то, что если есть это alert (), то после него фокус работает нормально.

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

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

Ответы [ 7 ]

30 голосов
/ 25 августа 2010

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

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

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

Незаметно для пользователя, но дает IE возможность дышать.

8 голосов
/ 25 июля 2013

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

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

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

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

6 голосов
/ 10 декабря 2012

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

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

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

4 голосов
/ 03 сентября 2012

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

$('#dialog').find('#name').blur();
$('#dialog').find('#name').focus();
1 голос
/ 10 апреля 2013

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

$ ('. Elt'). FadeIn (200, function () {$ ('. Elt'). Focus ();});

1 голос
/ 25 августа 2009

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

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

Это заставит JavaScript работать после загрузки HTML.

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

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

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

0 голосов
/ 21 марта 2016

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...