183

ブートストラップモーダルに関していくつかの質問を見てきましたが、これとまったく同じものはないので、先に進みます.

私はonclickと呼ぶモーダルを持っています...

$(".modal-link").click(function(event){
  $("#modal-content").modal('show');
});

これは正常に動作しますが、モーダルを表示するときに最初の入力要素に注目したいと思います...場合によっては、最初の入力要素の ID が #photo_name になります。

だから私は試しました

   $(".modal-link").click(function(event){
     $("#modal-content").modal('show');
     $("input#photo_name").focus();
   });

しかし、これは無駄でした。最後に、「show」イベントにバインドしようとしましたが、それでも入力がフォーカスされません。最後に、テストのために、これは js の読み込み順序に関する疑いがあったため、setTimeout を入れて、1 秒遅らせるかどうか、フォーカスが機能するかどうかを確認しました。はい、機能します! しかし、この方法は明らかにクズです。setTimeout を使用せずに以下と同じ効果を得る方法はありますか?

  $("#modal-content").on('show', function(event){
    window.setTimeout(function(){
      $(event.currentTarget).find('input#photo_name').first().focus()
    }, 0500);
  });
4

11 に答える 11

371

これを試して

ここに古いデモがあります：

編集: (これは、Bootstrap 3 と jQuery 1.8.3 で動作するDEMOです)

$(document).ready(function() {
    $('#modal-content').modal('show');
    $('#modal-content').on('shown', function() {
        $("#txtname").focus();
    })
});

ブートストラップ 3 を開始するには、showd.bs.modal イベントを使用する必要があります。

$('#modal-content').on('shown.bs.modal', function() {
    $("#txtname").focus();
})
于 2012-08-30T05:34:40.973 に答える
75

Bootstrap 3 はこれを少し異なる方法で処理すると言いたかっただけです。イベント名は「shown.bs.modal」です。

$('#themodal').on('shown.bs.modal', function () {
   $("#txtname").focus();
});

または、次のように最初に表示される入力にフォーカスを置きます。

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

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

于 2013-08-02T13:38:48.213 に答える
10

これをレイアウトで使用して、すべてのモーダルをキャプチャし、最初の入力に焦点を当てています

  $('.modal').on('shown', function() {
     $(this).find('input').focus();
  });
于 2012-08-31T15:19:23.647 に答える
9

ブートストラップ 3 で同じ問題が発生しました。リンクをクリックするとフォーカスしますが、javascript でイベントをトリガーするときはフォーカスしません。ソリューション：

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

おそらくそれはアニメーションに関するものです！

于 2014-11-05T14:19:51.397 に答える
8

「shown.bs.modal」イベントをキャッチするのに問題がありました..そして、これは完璧に機能する私のソリューションです..

代わりに単純な on():

$('#modal').on 'shown.bs.modal', ->

委任された要素で on() を使用します。

$('body').on 'shown.bs.modal', '#modal', ->
于 2015-01-08T22:12:08.397 に答える
6

fadeモーダルアニメーションが（ダイアログのクラスで）有効になっているためと思われます。を呼び出した後.modal('show')、ダイアログはすぐには表示されないため、現時点ではフォーカスを取得できません。

この問題を解決するには、次の2つの方法が考えられます。

  1. クラスから削除fadeして、を呼び出した直後にダイアログが表示されるようにし.modal('show')ます。デモについてはhttp://codebins.com/bin/4ldqp7x/4をご覧ください。（申し訳ありませんが、@ keyur、誤って編集し、新しいバージョンの例として保存しました）
  2. @keyurが書いたようなイベントで電話focus()してください。shown
于 2012-08-30T06:08:18.047 に答える
4

各イベントを自動的に呼び出す動的な方法を作成しました。イベントを一度だけ呼び出し、使用後に削除するため、フィールドにフォーカスするのに最適です。

function modalEvents() {
    var modal = $('#modal');
    var events = ['show', 'shown', 'hide', 'hidden'];

    $(events).each(function (index, event) {
        modal.on(event + '.bs.modal', function (e) {
            var callback = modal.data(event + '-callback');
            if (typeof callback != 'undefined') {
                callback.call();
                modal.removeData(event + '-callback');
            }
        });
    });
}

modalEvents()ドキュメントの準備ができていることを確認するだけです。

使用する：

$('#modal').data('show-callback', function() {
    $("input#photo_name").focus();
});

したがって、同じモーダルを使用して、毎回イベントを削除することを心配することなく、必要なものをロードできます。

于 2016-01-19T20:19:05.233 に答える
3

ブートストラップ 3 で同じ問題が発生し、次のように解決しました。

$('#myModal').on('shown.bs.modal', function (e) {
    $(this).find('input[type=text]:visible:first').focus();
})

$('#myModal').modal('show').trigger('shown');
于 2014-05-24T02:20:54.120 に答える
-1

少しクリーンでモジュール化されたソリューションは次のようになります。

$(document).ready(function(){
    $('.modal').success(function() { 
        $('input:text:visible:first').focus();
    });  
});

または、代わりに ID を例として使用します。

$(document).ready(function(){
    $('#modal-content').modal('show').success(function() {
        $('input:text:visible:first').focus();
    });  
});

それが役立つことを願っています..

于 2013-03-07T19:43:20.383 に答える