표시된 후 부트 스트랩 모달의 첫 번째 텍스트 입력에 초점을 설정하는 방법

동적 부트 스트랩 모달을로드하고 텍스트 입력이 거의 없습니다. 커서가이 모달의 첫 번째 입력에 초점을 맞추고 싶은 문제는 기본적으로 발생하지 않습니다.
그래서이 코드를 작성했습니다.

$('#modalContainer').on('show', function () {
   $('input:text:visible:first').focus();
});

그러나 이제는 잠시 입력에 초점을 맞춘 다음 자동으로 사라집니다. 왜 이런 일이 발생하고 어떻게 해결합니까?

@scumah가 해답을드립니다 : Twitter 부트 스트랩-클릭시 모달 내부의 텍스트 영역에 집중

부트 스트랩 2의 경우

modal.$el.on('shown', function () {
$('input:text:visible:first', this).focus();
});  

업데이트 : 부트 스트랩 3 용

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

========== 업데이트 ======

질문에 대한 응답으로 다른 데이터 대상을 지정하고 양식 입력 필드의 ID와 일치하도록 모달 ID의 이름을 바꾸고 업데이트 한 다음 마지막으로 이러한 새 항목과 일치하도록 JS를 업데이트하는 경우 동일한 페이지에서 여러 모달과 함께이를 사용할 수 있습니다. ID : http://jsfiddle.net/panchroma/owtqhpzr/5/
참조

HTML

...
<button ... data-target="#myModal1"> ... </button> 
... 
<!-- Modal 1 -->
<div class="modal fade" id="myModal1" ...>
... 

<div class="modal-body"> <textarea id="textareaID1" ...></textarea></div>

JS

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

jQuery없이이 작업을 수행하는 가장 좋은 방법을 찾았습니다.

<input value="" autofocus>

완벽하게 작동합니다.

이것은 html5 속성입니다. 모든 주요 브라우저에서 지원됩니다.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

David Taiaroa의 대답은 맞지만 모달을 "페이드 인"하는 시간이 입력에 초점을 맞출 수 없기 때문에 작동하지 않습니다. 지연을 만들어야합니다.

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

})

일반적인 코드 (아래) 가 작동 하지 않습니다 .

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

해결책을 찾았습니다 .

$('body').on('shown.bs.modal', '#myModal', function () {
    $('input:visible:enabled:first', this).focus();
})

여기에서 더보기

그 부트 스트랩이 페이지에 다음 정보를 추가했습니다.

HTML5가 의미를 정의하는 방식으로 인해 autofocus HTML 속성은 Bootstrap 모달에 영향을 미치지 않습니다. 동일한 효과를 얻으려면 일부 사용자 정의 JavaScript를 사용하십시오.

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

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

이것은 초점을 맞춘 입력 필드가있는 모든 팝업에서 가장 잘 작동하는 간단한 코드입니다.

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

jQuery를 사용한다고 가정 할 때 가장 정답은이 페이지에있는 모든 답변의 측면과 부트 스트랩이 통과하는 이벤트를 사용하는 것입니다.

$(document).on('shown.bs.modal', function(e) {
  $('input:visible:enabled:first', e.target).focus();
});

또한 변화 일 것 $(document)에 $('.modal')처럼, 또는 신호가이 초점이 발생해야한다는 것을 모달에 클래스를 추가하는$('.modal.focus-on-first-input')

이 코드를 시도해보십시오.

$(this).find('input:text')[0].focus();

첫 번째 단계 autofocus는 양식 입력에 속성 을 설정해야 합니다.

<input name="full_name" autofocus/>

그런 다음 모달이 표시된 후 입력의 자동 초점을 설정하기 위해 선언을 추가해야합니다.
이 코드를 시도하십시오.

$(document).on('ready', function(){
    // Set modal form input to autofocus when autofocus attribute is set
    $('.modal').on('shown.bs.modal', function () {
        $(this).find($.attr('autofocus')).focus();
    });
});

열려있는 모달에 자동으로 초점을 맞추려면 첫 번째 입력에 초점을 맞추는이 스 니펫을 패턴 또는 lib 함수에 넣을 수 있습니다.

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

모든 모달에서 작동하는 스 니펫을 찾고 열린 텍스트에서 첫 번째 입력 텍스트를 자동으로 검색하는 경우 다음을 사용해야합니다.

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

모달이 ajax를 사용하여로드 된 경우 대신 다음을 사용하십시오.

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

이것은 가장 일반적인 해결책입니다

$('body').on('shown.bs.modal', '.modal', function () {
    $(this).find(":input:not(:button):visible:enabled:not([readonly]):first").focus();
});

• 페이지로드 후 DOM에 추가 된 모달과 함께 작동
• 버튼이 아닌 입력, 텍스트 영역, 선택과 함께 작동합니다.
• ommits 숨김, 비활성화, 읽기 전용
• 페이드 된 모달과 함께 작동하며 setInterval이 필요하지 않습니다.

입력 / 텍스트 상자가 열려있을 때 modal의 tabIndex 속성 을 제거하십시오 . 입력 / 텍스트 상자를 닫을 때 이전 상태로 다시 설정하십시오 . 이 문제를 해결하는 것입니다 관계없이 부트 스트랩 버전을 , 그리고 사용자 경험의 흐름을 손상시키지 않고 .

Bootstrap 4 문서에 따르면 :

HTML5가 의미를 정의하는 방식으로 인해 autofocus HTML 속성은 Bootstrap 모달에 영향을 미치지 않습니다. 동일한 효과를 얻으려면 일부 사용자 정의 JavaScript를 사용하십시오.

예 :

$('#idOfMyModal').on('shown.bs.modal', function () {
    $('input:first').trigger('focus')
});

링크 .

자동 초점을 사용하여 올바른 양식 요소를 검색하십시오.

$('.modal').on('shown.bs.modal', function() {
  $(this).find('[autofocus]').focus();
});

$(document).ready(function() {
  $("#button").click(function() {
    $('#mymodal').on('shown.bs.modal', function() {
      $('#myinput').focus();
    })
  });
});

• 모달 형식을 호출하는 "#button"입니다.

• "#mymodal"은 모달 형식입니다.

• "#myinput"은 초점을 맞출 입력입니다.