Twitter bootstrap - 專注於點擊模式內的textarea

Question

剛剛開始玩bootstrap，這太棒了。

我想弄清楚這一點。 我有一個textarea在模態窗口內反饋。 它很棒。 但是當我點擊按鈕激活模態時，我希望焦點轉到textarea。 我似乎無法讓它發揮作用。

這是一個小提琴： 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();
});​

要恢復當我點擊“啟動模式”時，我想要顯示模態並將焦點放在textarea上。

謝謝你的幫助。

Answer 1

它不起作用，因為當您單擊按鈕時尚未加載模態。 您需要掛鈎的焦點事件，和去引導的模態頁面 ，我們看到的情況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所指出的那樣，在Bootstrap 3中，事件名稱更改為shown.bs.modal 。 因此，對於Bootstrap 3使用：

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

Bootstrap 3的新小提琴： http ： //jsfiddle.net/WV5e7/

Answer 2

我想要一個聲明版本，所以我選擇了以下內容：

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

然后，您可以簡單地向您的字段添加data-modalfocus屬性，如下所示：

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

當模態彈出時，你的領域將獲得焦點。

Answer 3

Bootstrap3

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

Bootstrap 2

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

Answer 4

您可以使用autofocus html元素設置自動對焦。

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

小提琴（點擊）

Answer 5

如果您的模態具有'淡入'屬性：

這可以工作，但您可能需要調整超時的持續時間，顯然需要調整ID：

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

Answer 6

我在chrome中遇到了重大問題...我希望這對某人有所幫助。

//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);

    });

Answer 7

正如其中一條評論所述，您需要從模態中刪除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>

Answer 8

我想要一些更通用的東西

    $(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的任何控件。 設置焦點略有延遲，使其具有一定的風格。

Answer 9

我不知道為什么，但選擇的解決方案對我不起作用..我使用以下代碼片段代替：

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

我知道它不是那么漂亮，但至少它可以工作.. Bootstrap v2.3.0

Answer 10

如果您正在使用bootstrap v3，並且您正在使用模態對話框和wysihtml5文本編輯器，則以下工作（假設#basic是您的模態表單的ID）：

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

Answer 11

將事件直接附加到模態屏幕對我來說不起作用。 我正在使用此代碼：

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

使用這段代碼我只需要更改myField作為我想擁有焦點的控件的id，它還允許我為多個模態屏幕定義焦點，我有類似的東西：

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

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

Answer 12

發現：

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

工作得很好，因為它只是找到第一個表單控件而不是需要特定的ID等。大多數時候都需要。

Answer 13

<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>