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

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

Ответ 1

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

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

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

Ответ 2

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

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

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

Ответ 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

Ответ 4

Если

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

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

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

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

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

Ответ 8

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

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

Ответ 9

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

Ответ 10

$(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();
        }
    });
});

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

Ответ 11

Если вы загружаете другую страницу/Вид в div, вы просто добавляете

$(document).ready(function(){ $("#header").focus(); });

страницы, которую необходимо загрузить. Так что, когда эта страница будет загружена, она автоматически установит фокус на этом div.