Bezdepbonusu7Программирование: статьи и ответы

Вопрос

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

Автор вопроса: MrGОтветов: 9

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

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

  • Не могли бы вы также показать нам сгенерированный HTML? Bela 16.09.2009
  • $('#display', '#header').focus() должен работать orip 16.09.2009

focussetfocushtmljquery

Ответы

Ответ 1 · рейтинг 57 · Jan Willem B

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

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

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

Ответ 2 · рейтинг 12 · Paul Suart

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

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

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

Ответ 3 · рейтинг 9 · Arta

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

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

Вместо:

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

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

Ответ 4 · рейтинг 3 · xman

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

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

Ответ 5 · рейтинг 3 · Bela

If

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

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

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

Ответ 6 · рейтинг 2 · Per Lindberg

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

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

Ответ 7 · рейтинг 1 · IAmGroot

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

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

Ответ 8 · рейтинг 1 · BCnuckles

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

Ответ 9 · skinny

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

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы