1

In a php Web application, I am using twitter boot-strap modal box. When I click on the save button in the form, modal box is shown and the default focus is working correctly. But in iPad, when I tap the go button focus is not working.

Here is the twitter bootstrap modal code I am using:

<div class="modal hide" id="confirm-password">                    
   <div class="modal-header">    
   </div>
   <div class="modal-body">    
       <input type="text" placeholder="Your Current Password" value="" name="currentpassword" id="currentpassword" autofocus>                      
   </div>
   <div class="modal-footer">                           
   </div>
</div>

Here is the JS Code :

$('#confirm-password').on('shown', function () {
   jQuery('input:text:visible:first', this).focus(); //focus for input
});
karthzDIGI
  • 393
  • 1
  • 4
  • 15

2 Answers2

1

Note that focus does not work on iPads. The user has to tap the input in question. This is not Bootstrap-specific.

See: iPad HTML Focus

What you may be able to do is trigger a click or touchstart event on the input in question when the dialog is shown for touchscreen devices.

Community
  • 1
  • 1
mccannf
  • 16,619
  • 3
  • 51
  • 63
0

if you add your web application to home screen, this will work on recent iOS.

Muhaimin
  • 1,643
  • 2
  • 24
  • 48