Twitter 부트 스트랩-클릭시 모달 내부의 텍스트 영역에 집중

Twitter 부트 스트랩-클릭시 모달 내부의 텍스트 영역에 집중

---

부트 스트랩을 가지고 놀기 시작했고 놀랍습니다.

나는 이것을 알아 내려고 노력하고있다. 모달 창 안에 피드백을위한 텍스트 영역이 있습니다. 잘 작동합니다. 하지만 버튼을 클릭하여 모달을 활성화 할 때 텍스트 영역에 포커스를두고 싶습니다. 그리고 나는 그것을 작동시킬 수없는 것 같습니다.

여기 바이올린이 있습니다 : http://jsfiddle.net/denislexic/5JN9A/4/

다음은 코드입니다.

<a class="btn testBtn" data-toggle="modal" href="#myModal" >Launch Modal</a>

<div class="modal hide" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
      <textarea id="textareaID"></textarea>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>​

여기에 JS

$('.testBtn').on('click',function(){
    $('#textareaID').focus();
});​

다시 시작하려면 "Launch modal"을 클릭하면 모달이 표시되고 포커스가 텍스트 영역으로 이동합니다.

도움을 주셔서 감사합니다.

---

버튼을 클릭 할 때 모달이 아직로드되지 않았기 때문에 작동하지 않습니다. 당신은 이벤트에 포커스를 연결해야하고,가는 부트 스트랩의 조동사 페이지 우리가 이벤트를 볼 shown것을 is fired when the modal has been made visible to the user (will wait for css transitions to complete). 이것이 바로 우리가 원하는 것입니다.

이 시도:

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

업데이트 된 바이올린 : http://jsfiddle.net/5JN9A/5/

---

최신 정보:

으로 @MrDBA의 노트, 부트 스트랩 3 이벤트 이름이되어 변경 에 shown.bs.modal. 따라서 Bootstrap 3의 경우 다음을 사용하십시오.

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

Bootstrap 3의 새로운 바이올린 : http://jsfiddle.net/WV5e7/

---

나는 이것의 선언적 버전을 갖고 싶었 기 때문에 다음과 같이 갔다.

$(document).ready(function() {
    $(".modal").on('shown.bs.modal', function () {
        $("[data-modalfocus]", this).focus();
    });
});

그런 다음 다음과 같이 필드에 data-modalfocus 속성을 추가 할 수 있습니다.

<input type="text" data-modalfocus />

모달이 표시되면 필드에 초점이 맞춰집니다.

---

부트 스트랩 3

$(window.document).on('shown.bs.modal', '.modal', function() {
    window.setTimeout(function() {
        $('[autofocus]', this).focus();
    }.bind(this), 100);
});

부트 스트랩 2

$(window.document).on('shown', '.modal', function() {
    window.setTimeout(function() {
        $('[autofocus]', this).focus();
    }.bind(this), 100);
});

---

autofocushtml 요소를 사용하여 자동 초점을 설정할 수 있습니다 .

<textarea id="textareaID" autofocus="" ></textarea>

여기 바이올린 (클릭)

---

모달에 'fade'속성이있는 경우 :

이것은 작동하지만 시간 초과 기간과 필요한 경우 분명히 ID를 조정해야 할 수 있습니다.

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

---

크롬에 큰 문제가 있었는데 ... 누군가에게 도움이 되었으면합니다.

//When user clicks link
$('#login-modal-link').on('click',function() {
        setTimeout(function(){
                //If modal has class
            if ($('#login-modal').hasClass('modal')) {
                //Whatever input you want to focus in
                $('#user_login_modal').focus();
            }
        },100);

    });

---

주석 중 하나에서 언급했듯이 fade모달에서 제거해야합니다 . 그래서 이것은 나를 위해 작동합니다.

 <div id="myModal" class="modal">
    ...
    <textarea class="form-control" rows="5" id="note"></textarea>
  </div>

  <script>
    $('#myModal').on('shown.bs.modal', function () {
        $('#note').focus();
    })
  </script>

---

좀 더 일반적인 것을 원했습니다

    $(window.document).on('shown.bs.modal', '.modal', function () {
        var timer = window.setTimeout(function () {
            $('.firstInput', this).focus();
            typeof timer !== 'undefined' && window.clearTimeout(timer);
        }.bind(this), 100);
    });

이것으로 CSS 클래스 firstInput에 원하는 컨트롤을 제공합니다. 특정 감각을주는 초점 설정에 약간의 지연이 있습니다.

---

이유는 모르겠지만 선택한 솔루션이 작동하지 않습니다. 대신 다음 코드 스 니펫을 사용합니다.

$('#annul-modal').on('show', function() {
    setTimeout(function() {$('textarea:first', '#annul-form').focus();}, 400);
});

나는 그것이 그렇게 예쁘지는 않지만 적어도 작동한다는 것을 알고있다 .. 부트 스트랩 v2.3.0

---

If you are using bootstrap v3 and you are using both modal dialog and wysihtml5 text editor the following works (assuming #basic is the ID of your modal form):

    $('#basic').on('shown.bs.modal', function () {
    editor.composer.element.focus()
})

---

Attaching the event directly to the modal screen didn't work for me. I'm using this code instead:

$('body').on('shown.bs.modal', '.modal', function () {
  $('[id$=myField]').focus();
})

With this code I only need to change myField for the id of the control I want to have the focus, it also allows me to define the focus for multiple modal screens, I have something like:

      $('body').on('shown.bs.modal', '.modal', function () {
        $('[id$=YesCancel]').focus();
        $('[id$=YesInverted]').focus();
        $('[id$=cancelAddCustomer]').focus();
        $('[id$=closeHistoryModal]').focus();
      });

Source http://xcellerant.net/2014/08/06/set-focus-on-a-field-when-showing-a-bootstrap-3-modal/

---

Found doing:

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

Worked well as it just finds the first form-control rather than needing a specific id etc. Be just what is needed most of the time.

---

<a href="" id="btnmoverCategoriaRaiz">Mover para a raiz...</a> 
      <script>
         $(function(){
            $("#btnmoverCategoriaRaiz").click(function(){
                $("#novoPlaylist").modal();
                return false;
            });
         });

       </script>    
 <div id="novoPlaylist" class= "modal  hide">
          <div class="modal-header">
            <h3>Novo Playlist</h3>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
              <?echo $form->input("Playlist.nome", array("label"=>"Nome:")) ?>
            </form>
          </div>
              <div class="modal-footer">
                 <a href="javascript:;" class="btn" data-dismiss="modal">Cancelar</a>
                 <a href="javascript:;" class="btn btn-primary" id="SalvarNomePlaylist" data-loading-text="Aplicando..."> Savar</a>
              </div>
      </div>

참고URL : https://stackoverflow.com/questions/11634809/twitter-bootstrap-focus-on-textarea-inside-a-modal-on-click