CODEWITHSUNDEEP
javascriptjqueryhtmlcordovajquery-mobile
RamGrg
RamGrg

Reputation: 297

Jquery Mobile - click on popup(any region of header and content) automatically focus textfield

Click on any part of popup except button trigger focus on textfield and keyboard appears. I want the textfield to get focus when it is clicked. Is there any ways to solve this issue?

<div id="datasetPopup" data-role="popup" data-history="false" class="popupDialog" data-theme="b" data-dismissible='false'>
    <div data-role="header" data-theme="b" class="popupHeader">
        <h1><strong id="popupHeader"></strong></h1>
    </div>
    <div data-role="content" class="popupContent">
        <input type="text" id="searchText"/>
        <ul data-role="listview">
        /* lists */
        </ul>
    </div>
    <div class="footerFullButton">
        <button type="button" id="cancelButton">Cancel</button>
    </div>
</div>

Upvotes: 0

Views: 435

Answers (1)

deblocker
deblocker

Reputation: 7697

This is by design, but you can adopt the "trick" to add another input element positioned outside the popup, then the focus goes to the whole popup window, which looks also somehow not so bad:

.ui-popup {
  padding: 1em;
  min-width: 200px;
}

.hidden {
  position:absolute;
  top:-100px;
  width:1px;
  height:1px;
  overflow:hidden;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script type="text/javascript">
    $(document).on('mobileinit', function() {
      $.mobile.ignoreContentEnabled = true;
    });
  </script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
  <div data-role="page" id="page-one">
    <div data-role="header" data-position="fixed">
      <h3>Page</h3>
    </div>
    <div data-role="content">
      <a href="#popup" data-rel="popup" class="ui-btn">Popup</a>
    </div>
    <div data-role="footer" data-position="fixed">
      <h3>Footer</h3>
    </div>
    <div id="popup" data-role="popup" data-history="false" data-dismissible='false'>
      <input data-enhanced="true" type="button" class="hidden">
        <input type="text" id="usr" name="usr" value="">
        <a href="#" class="ui-btn" data-rel="back">Cancel</a>
    </div>
  </div>
</body>
</html>

You should also tell JQM to not reposition inside the popup window this displaced element. This is the reason for the initialization line with $.mobile.ignoreContentEnabled = true;.

Upvotes: 1

Related Questions