135

動的ブートストラップ モーダルを読み込みますが、テキスト入力がほとんど含まれていません。このモーダルの最初の入力にカーソルを合わせたいという問題に直面していますが、これはデフォルトでは発生していません。
だから私はそれを行うためにこのコードを書きました:

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

しかし、今では入力にしばらく集中すると、自動的に消えてしまいます。なぜこれが起こっているのか、どのように解決すればよいのでしょうか?

4

16 に答える 16

210

@scumah が答えを教えてくれます: Twitter ブートストラップ - クリック時にモーダル内のテキストエリアにフォーカス

ブートストラップ 2 の場合

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

更新: Bootstrap 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();
})
于 2013-03-06T16:12:27.420 に答える
58

David Taiaroaの答えは正しいですが、モーダルを「フェードイン」する時間が入力に集中できないため、機能しません。遅延を作成する必要があります。

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

})
于 2014-12-26T08:47:17.833 に答える
10

ブートストラップがページに次の情報を追加したことがわかりました。

HTML5 がセマンティクスを定義する方法により、 autofocus HTML 属性は Bootstrap モーダルでは効果がありません。同じ効果を得るには、カスタム JavaScript を使用します。

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

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

于 2015-03-31T14:33:42.490 に答える
3

このコードを試してください、それはあなたのために働くかもしれません

$(this).find('input:text')[0].focus();
于 2013-03-06T13:12:40.700 に答える
2

すべてのモーダルで機能するスニペットを探していて、開いたモーダルの最初の入力テキストを自動的に検索する場合は、これを使用する必要があります。

$('.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();
});
于 2019-02-26T09:03:34.343 に答える
0

Bootstrap 4のドキュメントによると：

HTML5 がセマンティクスを定義する方法により、 autofocus HTML 属性は Bootstrap モーダルでは効果がありません。同じ効果を得るには、カスタム JavaScript を使用します。

例えば：

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

リンク。

于 2020-02-29T23:15:32.677 に答える