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

質問

動的なブートストラップ・モーダルを読み込むと、いくつかのテキスト入力が含まれます。問題は、このモーダルで最初の入力にカーソルがフォーカスされるようにしたいのですが、デフォルトではそうならないことです。

そこで、それを行うために次のコードを書きました。

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

しかし、今それは一瞬のために入力に焦点を当て、その後自動的に離れて行く、なぜこれが起こっているとどのように解決するために？

どのように解決するのですか？

scumahが答えを出しています。 Twitter bootstrap - クリック時にモーダル内のテキストエリアにフォーカスする

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をリネームして更新し、最後にこれらの新しいIDに合わせてJSを更新すれば、同じページ上の複数のモーダルでこれを使用することができます。

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