54

私は例から次のモーダルフォームを持っています:

<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    Enter something: <input type="text" id="myInput">
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

モーダルが表示された後、入力フィールドをフォーカスしたい。
イベントにオートフォーカスとフィールドフォーカスの設定の両方を試しまし$('modal').shown()た。それはちょっとフィールドに焦点を当てています（フィールドがフォーカスされているときにラベルを表示する別のイベントがあります）が、実際にはフィールドはフォーカスされておらずTAB、もう一度フォーカスするために押す必要があります。私も次のようなことを試しました：

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

autofocus:"autofocus"私のフィールドの属性を設定します。それは同じ効果をもたらしました。
モーダルが通常のdivである場合、私が試したすべてが機能し、ページの読み込みに焦点が当てられます。しかし、モーダルがボタンによってトリガーされた場合、何も機能しません（もちろん、ロジックも変更します。モーダルが通常のdivである場合は、オンロードに集中できます。ボタンでトリガーする場合は、それを考慮してそれに応じて解決しようとします）。

私が望むのは、モーダルが読み込まれた後にフィールドにフォーカスするだけで、カーソルが点滅し、ユーザーが入力を開始できるようになります。

うまくいったのは、bootstrap.js 自体を変更することだけです$("#myInput").focus()。bootstrap.js モーダル セクションのどこかに入れましたが、どこにあったか忘れてしまいました。次に、bootstrap.js API を変更するのは良くないと思います。よりエレガントなソリューション。アドバイスをください、ありがとう xD

更新:
まず第一に、あなたの助けに感謝します! あなたのおかげで、私が抱えていた問題がRailsの問題であることがわかりました。

これが私がしたことです：
1）。rails generate controller home index
2)。app/views/home/index.htmlとapp/assets/javascript/something.jsは、robertklep が提供するこの jsFiddle のようなものです: http://jsfiddle.net/JCaFp/
4)。jquery-1.9.1.jsとbootstrap.jsはapp/assets/javascript/にあります (どちらもウェブサイトから取得したばかりで、何も変更されていません)
5)。app/views/layouts/application.html.erb - このファイルがソリューションの鍵だと思います: 

<!DOCTYPE html>
<html>
<head>
  <title>Udc</title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

それでもうまくいきません。すべてのjsファイルが含まれますが、ブラウザでモーダルを開くと、入力が一瞬フォーカスされ、再びフォーカスが外れます。

私もこれを試しました：

  <%= javascript_include_tag "jquery" %>
  <%= javascript_include_tag "bootstrap" %>
  <%= javascript_include_tag "somehow" %>

まだ同じもの。
提案？:)

アップデート：

解決しました！

somehow.js私のを変更した後

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

およびapplication.html.erbスタイルシートを次のようにします。 

  <%= javascript_include_tag "jquery" %>
  <%= javascript_include_tag "bootstrap" %>
  <%= javascript_include_tag "somehow" %>

期待どおりに動作します。再度、感謝します！

4

9 に答える 9

82

この投稿で説明されているように、表示されているイベント名は Bootstrap 3 で変更されたと思います。

@MrDBAが指摘しているように、Bootstrap 3 ではイベント名が に変更されてい shown.bs.modalます。

したがって、Bootstrap 3 の場合:

$('#myModal').on('shown.bs.modal', function () {
    $('#myInput').focus();
})
于 2013-12-17T08:44:44.673 に答える
41

各ダイアログに特定のコードを必要としない一般的なソリューションの場合、これを使用できます。

$('.modal').on('shown.bs.modal', function () {
  $(this).find('input:text:visible:first').focus();
})
于 2014-05-09T18:26:30.273 に答える
7

「shown.bs.modal」に問題がある場合は、タイムアウトを設定してください。

setTimeout(function() {
$('#myInput').focus();
}, 500);
于 2014-04-28T01:30:24.060 に答える
7

変更$(this).find("[autofocus]:first").focus();するだけ$(this).find("#myInput").focus();でうまくいきました。Bootstrap API を変更し、その変更を元に戻したい場合は、いつでもファイルを再ダウンロードして置き換えることができます。

于 2013-03-18T10:57:19.347 に答える
3

更新された答えはかなり賢いと思います。これを解決する別の方法があります。

Bootstrap 3.2 の js ファイルには、モーダルのフェード トランジション中およびフェード トランジション後にフォーカスを管理するスクリプトが含まれています。これは、モーダルのフォーム フィールドにフォーカスしている jQuery、javascript、または rails+HTML5 を妨げます。ブートストラップは、モーダルの読み込み後にフォーカスを削除します。

フォーカスをオーバーライドするブートストラップの機能を削除するには、モーダル スクリプト領域で次の行をコメント アウトします。

transition ?
    that.$element.find('.modal-dialog') // wait for modal to slide in
      .one($.support.transition.end, function () {
        // that.$element.focus().trigger(e)
        // the line above is stealing your focus after modal loads!
      })
      .emulateTransitionEnd(300) :
    that.$element.focus().trigger(e)

これで、フィールドはどのモーダル フォームでもフォーカスできるようになります。

于 2013-12-06T23:33:52.667 に答える
0

あなたも試すことができます

$('#the-modal').on('shown.bs.modal', function(e) {
    $('#the-input').focus();
});
于 2016-06-17T09:03:20.573 に答える