web-dev-qa-db-ja.com

Twitterでのオートフォーカス入力bootstrap modal

私はそのような問題を抱えています-Twitter bootstrapモーダル（そ​​れが表示された後）内のいくつかの要素をオート​​フォーカスする必要があります。 .loadメソッド）別のHTMLファイルから

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

モーダルが以前にロードされた場合にのみ機能します。
問題は、最初にモーダルがロードされたときにオートフォーカスを動作させる方法ですか？

jquerytwitter-bootstrapmodal-dialog
46
eawer

私はBootstrap= 3.0を使用しています（うまくいけば、これは3.1でも動作します）。

ESCキーでモーダルを閉じることができるため、tabindex="-1"を使用する必要がありました。

だから私はこの問題を次の方法で修正できました。

// Every time a modal is shown, if it has an autofocus element, focus on it.
$('.modal').on('shown.bs.modal', function() {
  $(this).find('[autofocus]').focus();
});
98
nc.

tabindex = "-1"を削除してみてください。正常に動作します。

<div class="modal fade" id="modalID" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="modal fade" id="modalID" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

お役に立てれば！

26
nooweel

アプリで@ncのソリューションを使用できませんでした。後で追加されたモーダルは表示されませんでした。これは私のために働いた

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

フランク・ファンが指摘するように、autofocus HTML属性に依存しないBootstrap）の新しいバージョンを使用している場合は、これを使用する必要があります。

$('#myModal').on('shown.bs.modal', function () {
  // get the locator for an input in your modal. Here I'm focusing on
  // the element with the id of myInput
  $('#myInput').focus()
})
16
Paul Oliver

上記の回答は、最新のBootstrap=バージョンの場合、多少古くなっています。

以下は抜粋です： http://getbootstrap.com/javascript/#modals

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

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

bootstrapモーダルが表示されている場合、フォーカスを設定したいautofocus属性を持つ入力があります。

JavaScriptのロード時にモーダルマークアップを使用できますか？

.modalイベントのすべてのshown.bs.modal要素にイベントハンドラーを登録します

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

モーダルマークアップは動的に生成されますか？

shown.bs.modalイベントのドキュメント全体にイベントハンドラーを登録します。

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