Twitter-загрузочный лоток - фокус на textarea внутри модального щелчка

Ответ 1

Это не работает, потому что, когда вы нажимаете кнопку, модальность еще не загружена. Вам нужно привязать фокус к событию, и, перейдя на страницу bootstrap, мы увидим событие shown, которое is fired when the modal has been made visible to the user (will wait for css transitions to complete). И это именно то, что мы хотим.

Попробуйте следующее:

$('#myModal').on('shown', function () {
    $('#textareaID').focus();
})
​

Здесь добавлена ​​ваша скрипка: http://jsfiddle.net/5JN9A/5/

Update:

Как отмечает @MrDBA, в Bootstrap 3 название события изменено на shown.bs.modal. Итак, для Bootstrap 3 используйте:

$('#myModal').on('shown.bs.modal', function () {
    $('#textareaID').focus();
})

Новая скрипка для Bootstrap 3: http://jsfiddle.net/WV5e7/

Ответ 2

Я хотел иметь декларативную версию этого, поэтому я пошел со следующим:

$(document).ready(function() {
    $(".modal").on('shown.bs.modal', function () {
        $("[data-modalfocus]", this).focus();
    });
});

Затем вы можете просто добавить свойство data-modalfocus в свое поле, например:

<input type="text" data-modalfocus />

И когда модальное всплывающее окно, ваше поле будет сосредоточено.

Ответ 3

Bootstrap3

$(window.document).on('shown.bs.modal', '.modal', function() {
    window.setTimeout(function() {
        $('[autofocus]', this).focus();
    }.bind(this), 100);
});

Bootstrap 2

$(window.document).on('shown', '.modal', function() {
    window.setTimeout(function() {
        $('[autofocus]', this).focus();
    }.bind(this), 100);
});

Ответ 4

Вы можете использовать элемент autofocus html для установки автофокуса.

<textarea id="textareaID" autofocus="" ></textarea>

Сценарий здесь (нажмите)

Ответ 5

Если ваш модальный имеет свойство "fade":

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

$("#ID-of-modal").on('show', function(event){
                window.setTimeout(function(){
                  $(event.currentTarget).find('input#ID-of-input').first().focus()
                }, 0175);
              });

Ответ 6

У меня были серьезные проблемы с хромом... Надеюсь, это поможет кому-то.

//When user clicks link
$('#login-modal-link').on('click',function() {
        setTimeout(function(){
                //If modal has class
            if ($('#login-modal').hasClass('modal')) {
                //Whatever input you want to focus in
                $('#user_login_modal').focus();
            }
        },100);

    });

Ответ 7

Как уже упоминалось в одном из комментариев, вам нужно удалить fade из вашего модального. Так это работает для меня:

 <div id="myModal" class="modal">
    ...
    <textarea class="form-control" rows="5" id="note"></textarea>
  </div>

  <script>
    $('#myModal').on('shown.bs.modal', function () {
        $('#note').focus();
    })
  </script>

Ответ 8

Мне нужно нечто более общее

    $(window.document).on('shown.bs.modal', '.modal', function () {
        var timer = window.setTimeout(function () {
            $('.firstInput', this).focus();
            typeof timer !== 'undefined' && window.clearTimeout(timer);
        }.bind(this), 100);
    });

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

Ответ 9

Я не знаю, почему, но выбранное решение не работает для меня. Вместо этого я использую следующий фрагмент кода:

$('#annul-modal').on('show', function() {
    setTimeout(function() {$('textarea:first', '#annul-form').focus();}, 400);
});

Я знаю, что это не так красиво, но по крайней мере это работает. Bootstrap v2.3.0

Ответ 10

Если вы используете bootstrap v3, и вы используете как модальный диалог, так и текстовый редактор wysihtml5, следующие работы (предполагая, что #basic - это идентификатор вашей модальной формы):

    $('#basic').on('shown.bs.modal', function () {
    editor.composer.element.focus()
})

Ответ 11

Прикрепление события непосредственно к модальному экрану не сработало для меня. Вместо этого я использую этот код:

$('body').on('shown.bs.modal', '.modal', function () {
  $('[id$=myField]').focus();
})

С помощью этого кода мне нужно изменить myField для идентификатора элемента управления, в котором я хочу сосредоточиться, а также позволяет определить фокус для нескольких модальных экранов, у меня есть что-то вроде:

      $('body').on('shown.bs.modal', '.modal', function () {
        $('[id$=YesCancel]').focus();
        $('[id$=YesInverted]').focus();
        $('[id$=cancelAddCustomer]').focus();
        $('[id$=closeHistoryModal]').focus();
      });

Источник http://xcellerant.net/2014/08/06/set-focus-on-a-field-when-showing-a-bootstrap-3-modal/

Ответ 12

Найдено:

$(document).on('shown.bs.modal', function () {
  $(this).find('.form-control:visible:first').focus();
});

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

Ответ 13

<a href="" id="btnmoverCategoriaRaiz">Mover para a raiz...</a> 
      <script>
         $(function(){
            $("#btnmoverCategoriaRaiz").click(function(){
                $("#novoPlaylist").modal();
                return false;
            });
         });

       </script>    
 <div id="novoPlaylist" class= "modal  hide">
          <div class="modal-header">
            <h3>Novo Playlist</h3>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
              <?echo $form->input("Playlist.nome", array("label"=>"Nome:")) ?>
            </form>
          </div>
              <div class="modal-footer">
                 <a href="javascript:;" class="btn" data-dismiss="modal">Cancelar</a>
                 <a href="javascript:;" class="btn btn-primary" id="SalvarNomePlaylist" data-loading-text="Aplicando..."> Savar</a>
              </div>
      </div>