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

Question

Как правильно настроить фокусировку на определенном поле в динамически загруженном 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>

Большое, большое спасибо!

Answer 1

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

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

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

Answer 2

Вы пробовали просто выбирать по Id?

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

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

Answer 3

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

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

Вместо:

$( '#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 .

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

Martas

Answer 4

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

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

Answer 5

Если

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

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

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

Answer 6

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

$(function() { $("#login-user-name").focus(); }); // jQuery rocks!

Answer 7

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

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

Answer 8

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

Answer 9

$(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); чтобы увидеть, какому объекту U попытаться установить свойство или функцию.

Answer 10

$("#header").attr('tabindex', -1).focus();