☰

Twitter ブートストラップ - クリックするとモーダル内のテキストエリアにフォーカスが当てられる 質問する

tag-icon • tag-icon javascript jquery twitter-bootstrap focus textarea
Twitter ブートストラップ - クリックするとモーダル内のテキストエリアにフォーカスが当てられる 質問する

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

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

ご協力いただきありがとうございます。

ベストアンサー1

ボタンをクリックしたときにモーダルがまだ読み込まれていないため、動作しません。フォーカスをイベントにフックし、Bootstrap のモーダルページ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/

アップデート：

として＠ミスターDBA注: Bootstrap 3ではイベント名はかわったにshown.bs.modal。つまり、Bootstrap 3 の場合は以下を使用します。

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

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

おすすめ記事