jqueryMobile將焦點集中在彈出框中的輸入字段

在我的jquery移動應用程序中，我想在打開彈出窗口後自動將焦點設置在輸入字段上。輸入字段在彈出如下。焦點在開始時正確設置，但在彈出完全降低後丟失。jqueryMobile將焦點集中在彈出框中的輸入字段

<!-- Link--><a onclick="$('#popup_input').focus()" 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>

http://jsfiddle.net/kx7Gz/

感謝您的幫助

樣reagrds

來源

2013-05-01 user1584028

工作例如：http://jsfiddle.net/Gajotres/BknCc/

您需要使用JavaScript的一點點，使這項工作。不要使用內聯javascript將焦點設置在字段上。相反，等待popup完全創建並在做任何事情之前展示。

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(); 
     } 
    }); 
});

來源

2013-05-01 11:34:14 Gajotres

完美，非常感謝您快速找到所需答案！ – user1584028 2013-05-01 11:51:20

@Gajotres如何關注jquerymobile中的['ul'過濾器]（http://view.jquerymobile.com/1.4.2/demos/filterable/）輸入字段？ – bCliks 2014-07-09 12:51:40

@Gajotres我有一個稍微不同的問題。我打開彈出式窗體。當我點擊輸入字段輸入數據時，字段被虛擬鍵盤隱藏。由於阻止，我不能單獨提出問題。 – mokNathal 2015-11-30 11:11:51

jqueryMobile將焦點集中在彈出框中的輸入字段

回答

相關問題