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 для установки фокуса на поле. Вместо этого подождите, пока всплывающее окно будет полностью создано и показывается, прежде чем что-либо делать.

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

@Gajotres как сфокусироваться на ['ul' filter] (http://view.jquerymobile.com/1.4.2/demos/filterable/) поле ввода в jquerymobile? – bCliks

@Gajotres У меня немного другая проблема. Я открываю форму в всплывающем окне. когда я нажимаю на поле ввода для ввода данных, поле скрывается виртуальной клавиатурой. Я не могу задать отдельный вопрос из-за блока. – mokNathal

jqueryMobile установить фокус на поле ввода в всплывающем окне

ответ

Смежные вопросы