web-dev-qa-db-ja.com

Twitter bootstrapモーダル入力フィールドフォーカス

例から次のモーダルフォームがあります。

_<!-- 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モーダルセクション内のどこかに配置しましたが、どこにあるか忘れてしまいました。2番目-bootstrap.jsを変更するのは良くないと思いますAPI、より簡単でエレガントなソリューションが必要です。アドバイスしてください、ありがとうxD

更新：
まず、ご協力ありがとうございます。おかげで、私が抱えていた問題はRails problem。

ここに私がやったことがあります：
1）。 _Rails generate controller home index_
2）。 app/views/home/index.htmlおよびapp/assets/javascript/something.jsは、robertklep： http://jsfiddle.net/JCaFp/
4）。 jquery-1.9.1.jsおよびbootstrap.jsはapp/assets/javascript /にあります（どちらもWebサイトから新しく作成されたもので、変更はありません）
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" %>
_

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

javascriptjqueryruby-on-railstwitter-bootstrap
53
konnigun

示されている イベント名がBootstrap 3で変更された this postで説明されているように）.

@ MrDBA notes、in Bootstrap 3イベント名は changed to shown.bs.modal。

したがって、Bootstrap 3を使用する場合：

$('#myModal').on('shown.bs.modal', function () {
    $('#myInput').focus();
})
81
David Kirkland

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

$('.modal').on('shown.bs.modal', function () {
  $(this).find('input:text:visible:first').focus();
})
40
pschwamb

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">
11
Sunil Shivalkar

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

setTimeout(function() {
$('#myInput').focus();
}, 500);
7
hacklover

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

7
Austin Cummings

Tabindex = "-1"を削除しましたが、とても便利です。

変更前の私のHTMLコード：

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

変更後のHTMLコード：

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

私の入力コード：

<input id="tblModalNombreConductor" type="text" maxlength="50" placeholder="Ej: Armando Casas" autofocus/>

また、Javascriptコードに設定がありません。

6
Richard Rebeco

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

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

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

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)

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

3
Deborah

できること：例

<%= f.text_field :first_name, class: "form-control", placeholder: "Enter first name", autofocus: true%>

これを追加するだけです：autofocus：true

1
Raz

また試すことができます

$('#the-modal').on('shown.bs.modal', function(e) {
    $('#the-input').focus();
});
0
ctf0