부트 스트랩 모달에서 특정 필드의 포커스를 설정하는 방법

부트 스트랩 모달과 관련하여 몇 가지 질문을 보았지만 정확히 이와 같은 것은 없었으므로 계속하겠습니다.

나는 onclick이라고 부르는 모달을 가지고 있습니다 ...

$(".modal-link").click(function(event){
  $("#modal-content").modal('show');
});

이것은 잘 작동하지만 모달을 표시 할 때 첫 번째 입력 요소에 집중하고 싶습니다 ... 경우에 따라 첫 번째 입력 요소의 ID는 #photo_name입니다.

그래서 나는 시도했다

   $(".modal-link").click(function(event){
     $("#modal-content").modal('show');
     $("input#photo_name").focus();
   });

그러나 이것은 아무 소용이 없었다. 마지막으로 'show'이벤트에 바인딩을 시도했지만 입력에 초점이 맞지 않습니다. 마지막으로 테스트를 위해 js 로딩 순서에 대한 의심이 있었기 때문에 setTimeout을 설정하여 초를 지연시키고 포커스가 작동하는지 확인합니다. 그렇습니다. 작동합니다! 그러나이 방법은 분명히 쓰레기입니다. setTimeout을 사용하지 않고 아래와 같은 효과를 줄 수있는 방법이 있습니까?

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

이 시도

오래된 데모 는 다음과 같습니다 .

편집 : ( Bootstrap 3 및 jQuery 1.8.3과 함께 작동하는 DEMO 입니다)

$(document).ready(function() {
    $('#modal-content').modal('show');
    $('#modal-content').on('shown', function() {
        $("#txtname").focus();
    })
});

부트 스트랩 3을 시작하면 shown.bs.modal 이벤트를 사용해야합니다.

$('#modal-content').on('shown.bs.modal', function() {
    $("#txtname").focus();
})

Bootstrap 3이 이것을 조금 다르게 처리한다고 말하고 싶었습니다. 이벤트 이름은 "shown.bs.modal"입니다.

$('#themodal').on('shown.bs.modal', function () {
   $("#txtname").focus();
});

또는 다음과 같이 첫 번째 보이는 입력에 초점을 두십시오.

.modal('show').on('shown.bs.modal', function ()
{
    $('input:visible:first').focus();
})

http://getbootstrap.com/javascript/#modals

레이아웃에서 모든 모달을 캡처하고 첫 번째 입력에 집중하기 위해 이것을 사용하고 있습니다.

  $('.modal').on('shown', function() {
     $(this).find('input').focus();
  });

부트 스트랩 3과 동일한 문제가 발생했습니다. 링크를 클릭하면 초점이되지만 자바 스크립트로 이벤트를 트리거 할 때는 초점이 맞지 않습니다. 해결책:

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

아마 그것은 애니메이션에 관한 것입니다!

"shown.bs.modal"이벤트를 잡는 데 문제가있었습니다. 그리고 이것이 완벽하게 작동하는 솔루션입니다 ..

대신 간단한 on () :

$('#modal').on 'shown.bs.modal', ->

위임 된 요소와 함께 on ()을 사용하십시오.

$('body').on 'shown.bs.modal', '#modal', ->

모달 애니메이션이 활성화되어 있기 때문에 ( fade대화 상자 클래스에서) 호출 후 .modal('show')대화 상자가 즉시 표시되지 않으므로 현재 초점을 맞출 수 없습니다.

이 문제를 해결하는 두 가지 방법을 생각할 수 있습니다.

1. fade클래스에서 제거 하면을 호출 한 후 대화 상자가 즉시 표시 .modal('show')됩니다. 데모 는 http://codebins.com/bin/4ldqp7x/4 를 참조 하십시오 . (죄송합니다 @keyur, 실수로 편집하여 새 버전의 예제로 저장했습니다)
2. 전화 focus()에서 shown@keyur가 쓴 같은 이벤트입니다.

각 이벤트를 자동으로 호출하는 동적 방법을 만들었습니다. 한 번만 이벤트를 호출하여 사용 후 제거하기 때문에 필드에 초점을 맞추는 데 완벽합니다.

function modalEvents() {
    var modal = $('#modal');
    var events = ['show', 'shown', 'hide', 'hidden'];

    $(events).each(function (index, event) {
        modal.on(event + '.bs.modal', function (e) {
            var callback = modal.data(event + '-callback');
            if (typeof callback != 'undefined') {
                callback.call();
                modal.removeData(event + '-callback');
            }
        });
    });
}

modalEvents()문서 준비 를 요청하면 됩니다.

사용하다:

$('#modal').data('show-callback', function() {
    $("input#photo_name").focus();
});

따라서 동일한 모달을 사용하여 매번 이벤트 제거에 대해 걱정하지 않고 원하는 것을로드 할 수 있습니다.

부트 스트랩 3과 동일한 문제가 있었고 다음과 같이 해결되었습니다.

$('#myModal').on('shown.bs.modal', function (e) {
    $(this).find('input[type=text]:visible:first').focus();
})

$('#myModal').modal('show').trigger('shown');

부트 스트랩이로드 된 이벤트를 추가했습니다.

https://getbootstrap.com/docs/3.3/javascript/#modals

모달에서 'loaded.bs.modal'이벤트를 캡처하십시오.

$('#mymodal').on('loaded.bs.modal', function(e) {
  // do cool stuff here all day… no need to change bootstrap
})

부트 스트랩 모달 쇼 이벤트

$('#modal-content').on('show.bs.modal', function() {
$("#txtname").focus();

})

좀 더 깨끗하고 모듈화 된 솔루션은 다음과 같습니다.

$(document).ready(function(){
    $('.modal').success(function() { 
        $('input:text:visible:first').focus();
    });  
});

또는 대신 ID를 예로 사용하십시오.

$(document).ready(function(){
    $('#modal-content').modal('show').success(function() {
        $('input:text:visible:first').focus();
    });  
});

도움이 되길 바랍니다 ..