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

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

---

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

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

see more here

---

I got that bootstrap added the following info on their page:

Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:

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

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

---

This is the simple code that will work for you best on all popups that has any input field with focusing it

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

---

I think the most correct answer, assuming the use of jQuery, is a consolidation of aspects of all the answers in this page, plus the use of the event that Bootstrap passes:

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

It also would work changing $(document) to $('.modal') or to add a class to the modal that signals that this focus should occur, like $('.modal.focus-on-first-input')

---

try this code, it might work for you

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

---

First step, you have to set your autofocus attribute on form input.

<input name="full_name" autofocus/>

And then you have to add declaration to set autofocus of your input after your modal is shown.
Try this code :

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

---

If you want to just auto focus any modal that was open you can put in you patterns or lib functions this snippet that will focus on the first input:

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

---

if you're looking for a snippet that would work for all your modals, and search automatically for the 1st input text in the opened one, you should use this:

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

If your modal is loaded using ajax, use this instead:

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

---

this is the most general solution

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

• works with modals added to DOM after page load
• works with input, textarea, select and not with button
• ommits hidden, disabled, readonly
• works with faded modals, no need for setInterval

---

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

• It is "#button" that calls the modal form,

• "#mymodal" is the modal form,

• "#myinput" is the input you want to get focus

참고URL : https://stackoverflow.com/questions/15247849/how-to-set-focus-to-first-text-input-in-a-bootstrap-modal-after-shown