web-dev-qa-db-ja.com

Twitter bootstrap-クリック時にモーダル内のテキストエリアにフォーカス

bootstrapをいじり始めたところ、それは驚くべきことです。

私はこれを理解しようとしています。モーダルウィンドウ内にフィードバック用のテキストエリアがあります。うまくいきます。しかし、ボタンをクリックしてモーダルをアクティブにすると、テキストエリアにフォーカスが移動するようにします。そして、私はそれを機能させることができないようです。

ここにフィドルがあります： 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();
});​

再開するには「モーダルを起動」をクリックすると、モーダルが表示され、テキストエリアにフォーカスが移動します。

助けてくれてありがとう。

javascriptjquerytwitter-bootstrapfocustextarea
68
denislexic

ボタンをクリックしてもモーダルがまだロードされていないため、機能しません。フォーカスをイベントにフックし、 ブートストラップのモーダルページ に移動する必要があります。イベント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 notesのように、Bootstrap 3では、イベント名は changed to shown.bs.modalです。したがって、Bootstrap 3の場合：

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

Bootstrap 3の新しいフィドル： http://jsfiddle.net/WV5e7/

202
scumah

私はこれの宣言バージョンが欲しかったので、私は次のように行きました：

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

その後、次のようにフィールドにデータモーダルフォーカスプロパティを追加するだけです。

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

そして、モーダルポップアップが表示されると、フィールドがフォーカスされます。

21
Alexandre Roger

Bootstrap3

$(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);
});
11
Jonas Sciangula Street

autofocus html要素を使用して、オートフォーカスを設定できます。

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

ここでクリック（クリック）

4
Chancho

もう少し一般的なものが欲しかった

    $(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に必要なコントロールを提供します。フォーカスを設定するのに少し遅れがあり、一定のセンスを与えます。

1
John Grabauskas

私はクロムで大きな問題を抱えていた...これが誰かを助けることを願っています。

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

    });
1
Davis

コメントの1つで述べたように、モーダルから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>
1
tokhi

モーダルに「フェード」プロパティがある場合：

これは機能しますが、タイムアウトの期間と必要に応じてIDを調整する必要がある場合があります。

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

bootstrap v3を使用していて、モーダルダイアログとwysihtml5テキストエディターの両方を使用している場合、次のように動作します（#basicがモーダルフォームのIDであると仮定）：

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

理由はわかりませんが、選択したソリューションはうまくいきません。代わりに次のコードスニペットを使用します。

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

私はそれがそれほどきれいではないことを知っていますが、少なくともそれは動作します.. Bootstrap v2.3.0

0
nKognito

モーダル画面に直接イベントを添付してもうまくいきませんでした。代わりにこのコードを使用しています：

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

このコードを使用すると、フォーカスを取得するコントロールのIDのmyFieldを変更するだけで済み、複数のモーダルスクリーンのフォーカスを定義することもできます。

      $('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/

0
Juan

やっていることがわかった：

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

特定のIDなどを必要とするのではなく、最初のフォームコントロールを見つけるだけであるため、うまく機能しました。ほとんどの場合に必要なものだけにしてください。

0
SimonKiteley