例から次のモーダルフォームがあります。
_<!-- 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" %>
_
期待どおりに動作します。再度、感謝します!
各ダイアログに特定のコードを必要としない一般的なソリューションでは、これを使用できます。
$('.modal').on('shown.bs.modal', function () {
$(this).find('input:text:visible:first').focus();
})
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">
「shown.bs.modal」に問題がある場合は、タイムアウトを設定してください。
setTimeout(function() {
$('#myInput').focus();
}, 500);
$(this).find("[autofocus]:first").focus();
を$(this).find("#myInput").focus();
に変更するだけで機能しました。 Bootstrap APIを変更し、その変更を取り消す場合は、いつでもファイルを再ダウンロードして置き換えることができます。
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コードに設定がありません。
更新された答えはかなり賢いと思います。これを解決する別の方法があります。
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)
これで、フィールドが任意のモーダルフォームにフォーカスできるようになります。
できること:例
<%= f.text_field :first_name, class: "form-control", placeholder: "Enter first name", autofocus: true%>
これを追加するだけです:autofocus:true
また試すことができます
$('#the-modal').on('shown.bs.modal', function(e) {
$('#the-input').focus();
});