ブートストラップモーダルの特定のフィールドが表示された後、そのフィールドにフォーカスを設定する方法

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

私はそのように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の読み込み順序に関するものです。1秒遅延するかどうかを確認するためにsetTimeoutを入力し、フォーカスが機能するかどうかを確認します。しかし、この方法は明らかにくだらないです。setTimeoutを使用せずに以下と同じ効果を発揮する方法はありますか？

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

これを試して

これが古いデモです。

編集：（これ はBootstrap 3とjQuery 1.8.3で動作するデモです）

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

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

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

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

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

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

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

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

おそらくそれはアニメーションについての何かです！

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

代わりに単純なon（）：

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

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

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

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

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

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

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

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

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

私はブートストラップ3で同じ問題があり、次のように解決しました：

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

$('#myModal').modal('show').trigger('shown');

ブートストラップはロードされたイベントを追加しました。

https://getbootstrap.com/docs/3.3/javascript/#modals

モーダルで 'loaded.bs.modal'イベントをキャプチャする

$('#mymodal').on('loaded.bs.modal', function(e) {
  // do cool stuff here all day… no need to change bootstrap
})

ブートストラップモーダルショーイベント

$('#modal-content').on('show.bs.modal', function() {
$("#txtname").focus();

}）

もう少しクリーンでモジュール化されたソリューションは次のとおりです。

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

お役に立てれば幸いです。