Working example: http://jsfiddle.net/Gajotres/BknCc/
To do this, you need to use a little javascript. Do not use built-in javascript to set focus on the field. Instead, wait for the popup to be fully created and displayed before doing anything.
HTML:
<!DOCTYPE html> <html> <head> <title>jQM Complex Demo</title> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> </head> <body> <div data-role="page" id="index"> <div data-theme="b" data-role="header"> <h1>Index page</h1> </div> <div data-role="content"> <a href="#popup" data-iconpos="top" data-rel="popup" data-position-to="window" data-role="button" data-inline="false" data-transition="pop" data-icon="plus" data-theme="b">open</a> <div data-role="popup" id="popup" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all"> <div data-role="header" data-theme="a" class="ui-corner-top"> <h1>Popup</h1> </div> <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content"> <h3 class="ui-title">Focused Field</h3> <p> <input type="text" id="popup_input" /> </p> <a href="#" data-role="button"data-rel="back">Close</a> </div> </div> </div> </div> </body> </html>
Javascript:
$(document).on('pagebeforeshow', '#index', function(){ $( "#popup" ).popup({ afteropen: function( event, ui ) { $('#popup_input').focus(); } }); });