부트스트랩 모드에서 특정 필드의 포커스가 나타나면 설정하는 방법

부트스트랩 모드에서 특정 필드의 포커스가 나타나면 설정하는 방법

부트스트랩 모델과 관련하여 몇 가지 질문을 보았지만, 정확히 이와 같은 질문은 없었기 때문에 진행하겠습니다.

제가 클릭할 때 하는 모달이 있어요.

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

하지만 이것은 소용이 없었습니다.마지막으로 '쇼' 이벤트에 바인딩을 시도했지만 입력이 집중되지 않습니다.마지막으로 테스트를 위해 js 로딩 순서에 대한 것입니다. 잠시만 지연하면 포커스가 작동하는지 확인하기 위해 setTimeout을 넣었습니다. 네, 작동합니다.하지만 이 방법은 분명히 말도 안 되는 방법입니다.setTimeout을 사용하지 않고 아래와 같은 효과를 낼 수 있는 방법이 있습니까?

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

이거 먹어봐요.

이전 데모는 다음과 같습니다.

편집: (여기 부트스트랩 3과 jQuery 1.8.3이 포함된 작동 데모가 있습니다.)

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

그냥 부트스트랩 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" 이벤트를 잡는 데 문제가 있었습니다.그리고 이것이 완벽하게 작동하는 나의 해결책입니다.

대신 단순():

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

위임된 요소와 함께 ()에 사용:

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

modal 애니메이션이 활성화되어 있기 때문인 것 같습니다 (fade대화상자 클래스에서), 호출 후.modal('show'), 대화 상자가 바로 표시되지 않으므로 현재 포커스를 맞출 수 없습니다.

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

1. 제거한다.fade클래스에서 호출 후 대화상자가 바로 표시되도록 합니다..modal('show'). 데모는 http://codebins.com/bin/4ldqp7x/4 에서 보실 수 있습니다. (Sorry @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();
    });  
});

그게 도움이 되길..

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