web-dev-qa-db-ja.com

Bootstrapモーダル内の特定のフィールドにフォーカスが設定されたら、それを設定する方法

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

私はそのように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);
  });
javascripttwitter-bootstrapmodal-dialog
182
jdkealy

これを試して

これが古い _ demo _ です。

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

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

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

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

Bootstrap 3はこれを少し違った方法で処理すると言いたいだけです。イベント名は "seen.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

76
David Beck

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

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

私はリンクをクリックしたときに焦点を当てるが、JavaScriptでイベントをトリガーするときではなく、私はブートストラップ3と同じ問題を抱えていた。ソリューション：

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

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

9
Alejandro Fiore

私は "shows.bs.modal"イベントをキャッチするのに問題がありました..そしてこれは完璧に動作する私の解決策です..

代わりに単純な（）：

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

委譲された要素でon（）を使用してください。

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

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

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

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

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

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

そのため、毎回イベントを削除することを心配せずに、同じモーダルを使用して必要なものを読み込むことができます。

4
Danilo Colasso

私はブートストラップ3と同じ問題を抱えていて、このように解決しました：

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

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

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

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
})
0
bharat

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

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

）

0
AdminDev826