Menu
I have the following modal form from example:
<!-- 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> I want my input field to be focused after modal is shown.
I've tryed both autofocus and setting field focus on $('modal').shown() event. It kinda focuses field (I have another event which shows label when field is focused) but in fact field is not focused and I have to press TAB to focus it again. I also tried something like this:
$(".modal").on('shown', function() { $(this).find("[autofocus]:first").focus(); }); and setting autofocus:"autofocus" attribute for my field. It gave same effect.
Everything I tried works for when modal is just a usual div, it gets focus on page load. But when modal is triggered by button - nothing works (sure I change logic also, when modal is just a usual div I can focus it onload, when I trigger by button I take it into account and try to solve it accordingly).
What I want is just field to be focused after modal is loaded, so that it has blinking cursor and user can just start typing.
Only thing that worked is changing bootstrap.js itself, I've put $("#myInput").focus() somewhere inside bootstrap.js modal section but well I forgot where it was, and second - I think it's not good to change bootstrap.js API, there must be easier and more elegant solution. Advice me please, thanks xD
UPDATE:
First of all, thanks for your help! Thanks to you I figured out that problem I had is Rails problem.
Here is what I did:
1). rails generate controller home index
2). app/views/home/index.html and app/assets/javascript/something.js are like in this jsFiddle provided by robertklep: http://jsfiddle.net/JCaFp/
4). jquery-1.9.1.js and bootstrap.js are in app/assets/javascript/ (both are fresh from website, nothing changed)
5). app/views/layouts/application.html.erb - I guess this file is the key of our solution:
<!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> Still doesn't work. All js files get included, but when I open my modal in browser - input get focus for a moment and gets unfocused again.
I've also tried this:
<%= javascript_include_tag "jquery" %> <%= javascript_include_tag "bootstrap" %> <%= javascript_include_tag "somehow" %> Still same stuff.
Suggestions? :)
UPDATE:
Solved it!
After changing my somehow.js to
$(document).ready(function() { $(".modal").on('shown', function() { $(this).find("[autofocus]:first").focus(); }); }); and application.html.erb stylesheet to:
<%= javascript_include_tag "jquery" %> <%= javascript_include_tag "bootstrap" %> <%= javascript_include_tag "somehow" %> it works as expected. Thanks again!
793
Answer: Use the jQuery . focus() method You can simply use the jQuery . focus() method to set the focus on the first input box or textarea inside the Bootstrap modal when it is loaded upon activation.
tab, shift + tab and enter key and focus should be trapped inside modal and should not go out after pressing tab key multiple times.
I think the shown event name changed in Bootstrap 3, as explained in this post.
As @MrDBA notes, in Bootstrap 3 the event name is changed to
shown.bs.modal.
So, for Bootstrap 3 use:
$('#myModal').on('shown.bs.modal', function () { $('#myInput').focus(); }) For a general solution that doesn't require specific code for each dialog, you can use this:
$('.modal').on('shown.bs.modal', function () { $(this).find('input:text:visible:first').focus(); }) If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
