Установите фокус на поле в динамически загружаемом DIV

Как правильно установить фокус на определенное поле в динамически загружаемом DIV?

$("#display").load("?control=msgs"); // loads the HTML into the DIV
$('#display').fadeIn("fast"); // display it
$("tex#header").focus();          // ?? neither that
$("input#header").focus();        // ?? nor that
$('#display', '#header').focus()  // ?? nor that
$("#header").focus();             // ?? nor that works

Следующий HTML загружается в display DIV:

<div id="display">
<form id="newHeaderForm" class="dataform" action="/" method="post">
    <input id="to" type="hidden" value="22" name="to"/>
    <dl>
        <dt>Header</dt>
        <dd>
            <input id="header" class="large" type="text" name="header" value="" maxlength="128"/>
        </dd>
 </form>
 </div>

Огромное спасибо!


focus setfocus html jquery
person MrG    schedule 16.09.2009    source источник
comment
Не могли бы вы также показать нам сгенерированный HTML?   -  person Bela    schedule 16.09.2009
comment
$('#display', '#header').focus() должен работать   -  person orip    schedule 16.09.2009

Ответы (9)


arrow_upward
57
arrow_downward

Функция load() является асинхронной функцией. Вы должны установить фокус после завершения вызова load(), то есть в функции обратного вызова load(), потому что в противном случае элемент, на который вы ссылаетесь с помощью #header, еще не существует. Например:

$("#display").load("?control=msgs", {}, function() { 
  $('#header').focus();
});

У меня были проблемы даже с этим решением, поэтому я сделал setTimeout в обратном вызове и установил фокус в тайм-ауте, чтобы / действительно / убедиться, что элемент существует.

person Jan Willem B    schedule 16.09.2009
comment
Я продолжаю видеть подобные решения в отношении сложных сценариев, связанных с DOM и готовностью. Неужели просто нет альтернативы вызову setTimeout в течение произвольного промежутка времени и надежде, что этого достаточно? Мне кажется, что такой подход периодически терпит неудачу. Эта проблема была недавно поднята в моем вопросе: form-a" title="получение chrome запроса на сохранение пароля при динамическом создании формы a"> stackoverflow.com/questions/21191336/ - person EleventyOne; 20.01.2014
comment
Функция тайм-аута также присутствует в Angular. Другой синтаксис, но то же решение. Спасибо, что указали мне правильный путь с тайм-аутом.$timeout(function () { $window.document.getElementById('name').focus(); }); - person Michel; 12.02.2016
comment
Надлежащее количество времени в тайм-ауте равно 0; цель состоит в том, чтобы запланировать запуск кода focus() сразу после завершения кода создания ‹div›. См. developer.mozilla.org/en-US/docs/Web/JavaScript. /Цикл событий - person Stephen Leake; 16.05.2018

arrow_upward
12
arrow_downward

Вы пробовали просто выбирать по идентификатору?

$("#header").focus();

Поскольку идентификаторы должны быть уникальными, нет необходимости в более конкретном селекторе.

person Paul Suart    schedule 16.09.2009

arrow_upward
9
arrow_downward

Да, это происходит при манипулировании элементом, которого еще не существует (несколько участников здесь также сделали хорошее замечание с уникальным идентификатором). Я столкнулся с похожей проблемой. Мне также нужно передать аргумент функции, управляющей элементом, который вскоре будет отображен.

Решение, отмеченное здесь, мне не помогло. Наконец я нашел тот, который работал прямо из коробки. И это тоже очень красиво - обратный звонок.

Вместо:

$( '#header' ).focus();
or the tempting:
setTimeout( $( '#header' ).focus(), 500 );

Попробуй это:

setTimeout( function() { $( '#header' ).focus() }, 500 );

В моем коде при проверке передачи аргумента это не сработало, тайм-аут был проигнорирован:

setTimeout( alert( 'Hello, '+name ), 1000 );

Это работает, тайм-аут тикает:

setTimeout( function() { alert( 'Hello, '+name ) }, 1000 );

Отстойно, что w3schools не упоминает об этом.

Кредиты идут по адресу: makemineatriple.com< /а>.

Надеюсь, это поможет кому-то, кто приходит сюда.

person Arta    schedule 10.01.2011
comment
Кажется, что setTimeout помогает, даже если элемент действительно существует до вызова .focus(). Однако значение 500, вероятно, преувеличено. У меня на 10 работает нормально :) - person Nick; 17.08.2013

arrow_upward
3
arrow_downward 

$("#display").load("?control=msgs", {}, function() { 
  $('#header').focus();
});

я пробовал, но это не работает, пожалуйста, дайте мне больше советов, чтобы решить эту проблему. Спасибо за вашу помощь

person xman    schedule 28.06.2010
comment
Вы установили идентификатор поля, например ‹input id=header..›? Протестируйте свой код в Firefox и включите консоль ошибок или в Chrome с точкой останова в нужном месте, это может помочь. - person MrG; 29.06.2010

arrow_upward
3
arrow_downward

If

$("#header").focus();

не работает, то есть ли на вашей странице еще один элемент с идентификатором заголовка?

Используйте firebug для запуска $("#header") и посмотрите, что он вернет.

person Bela    schedule 16.09.2009

arrow_upward
2
arrow_downward

Как указал Ому, вы должны установить фокус в функции готовности документа. jQuery предоставляет это для вас. И сделайте выбор по идентификатору. Например, если у вас есть страница входа:

$(function() { $("#login-user-name").focus(); }); // jQuery rocks!
person Per Lindberg    schedule 23.06.2011

arrow_upward
1
arrow_downward

Это работает при загрузке страницы.

<script type="text/javascript">
    $(function () {
        $("#header").focus();
    });
</script>
person IAmGroot    schedule 03.05.2012

arrow_upward
1
arrow_downward

Динамически добавляемые элементы должны быть добавлены в DOM... clone().append() добавляет их в DOM... что позволяет выбирать их через jquery.

person BCnuckles    schedule 18.06.2010

arrow_upward
0
arrow_downward 

$(function (){
    $('body').on('keypress','.sobitie_snses input',function(e){
        if(e.keyCode==13){
            $(this).blur();
            var new_fild =  $(this).clone().val('');
            $(this).parent().append(new_fild);
            $(new_fild).focus();
        }
    });
});

большая часть ошибок связана с тем, что вы используете неправильный объект для установки правильности или функции. Используйте console.log(new_fild); чтобы увидеть, к какому объекту вы пытаетесь установить правильность или функцию.

person skinny    schedule 08.03.2014