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

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

---

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

나는 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', ->

---

Seems it is because modal animation is enabled (fade in class of the dialog), after calling .modal('show'), the dialog is not immediately visible, so it can't get focus at this time.

I can think of two ways to solve this problem:

1. Remove fade from class, so the dialog is immediately visible after calling .modal('show'). You can see http://codebins.com/bin/4ldqp7x/4 for demo. (Sorry @keyur, I mistakenly edited and saved as new version of your example)
2. Call focus() in shown event like what @keyur wrote.

---

I've created a dynamic way to call each event automatically. It perfect to focus a field, because it call the event just once, removing it after use.

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');
            }
        });
    });
}

You just need to call modalEvents() on document ready.

Use:

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

So, you can use the same modal to load what you want without worry about remove events every time.

---

I had the same problem with the bootstrap 3 and solved like this:

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

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

---

Bootstrap has added a loaded event.

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

capture the 'loaded.bs.modal' event on the modal

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

---

Bootstrap modal show event

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

})

---

A little cleaner and more modular solution might be:

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

Or using your ID as an example instead:

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

Hope that helps..

참고URL : https://stackoverflow.com/questions/12190119/how-to-set-the-focus-for-a-particular-field-in-a-bootstrap-modal-once-it-appear