表示後のブートストラップモーダルで最初のテキスト入力にフォーカスを設定する方法

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

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

しかし今、それはしばらくの間入力に焦点を合わせ、その後自動的に消えます、なぜこれが起こっているのか、そしてどのように解決しますか？

@scumahがあなたのための答えを持っています：Twitterブートストラップ-クリックでモーダル内の textareaに焦点を当てます

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

私は、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();
})

もっと見るこちら

ブートストラップのページに次の情報が追加されました。

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

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

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

これは、任意の入力フィールドを持つすべてのポップアップでフォーカスすることで最適に機能する単純なコードです

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

jQueryの使用を想定した場合の最も正しい答えは、このページのすべての回答の側面を統合し、さらにBootstrapが渡すイベントを使用することです。

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

次のように、このフォーカスが発生する必要があることを通知するクラスをモーダルに変更$(document)し$('.modal')たり、モーダルに追加したりすることもできます。$('.modal.focus-on-first-input')

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

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

最初のステップでは、autofocusフォーム入力に属性を設定する必要があります。

<input name="full_name" autofocus/>

そして、モーダルが表示された後、入力のオートフォーカスを設定する宣言を追加する必要があります。
このコードを試してください：

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

開いていた任意のモーダルを自動でフォーカスしたい場合は、パターンまたはlib関数を最初の入力に焦点を合わせるこのスニペットを配置できます。

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

すべてのモーダルで機能するスニペットを探しており、開いているものの最初の入力テキストを自動的に検索する場合は、次のように使用します。

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

これが最も一般的な解決策です

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

• ページの読み込み後にDOMに追加されたモーダルで動作します
• ボタンではなく、入力、テキストエリア、選択で動作します
• 非表示、無効、読み取り専用を省略
• 色あせたモーダルで動作し、setIntervalは不要

入力/テキストボックスが開いているときに、モーダルのtabIndexプロパティを削除してみてください。input / textboxを閉じるときに、元の状態に戻します。これにより、ユーザーエクスペリエンスのフローを損なうことなく、ブートストラップのバージョンに関係なく問題が解決されます。

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

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

例えば：

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

リンク。

オートフォーカスを使用して、適切なフォーム要素を検索します。

$('.modal').on('shown.bs.modal', function() {
  $(this).find('[autofocus]').focus();
});

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

• モーダルフォームを呼び出すのは「#button」です。

• 「#mymodal」はモーダルフォームです。

• 「#myinput」は、フォーカスを取得する入力です