Question

单击弹出窗口的任何部分，除了文本字段上的按钮触发器焦点和键盘出现。我希望文本字段在单击时获得焦点。有没有办法解决这个问题？

<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>

Answer 1

这是设计的，但你可以采用＆＃34;技巧＆＃34;要添加另一个位于弹出窗口外的输入元素，然后焦点转到整个弹出窗口，看起来也不是那么糟糕：

＆＃13;

.ui-popup {
  padding: 1em;
  min-width: 200px;
}

.hidden {
  position:absolute;
  top:-100px;
  width:1px;
  height:1px;
  overflow:hidden;
}

＆＃13;

<!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>

＆＃13;

您还应该告诉JQM 不在弹出窗口中重置此移位元素。这是初始化行$.mobile.ignoreContentEnabled = true;的原因。

Jquery Mobile - 单击弹出窗口（标题和内容的任何区域）自动聚焦文本字段

1 个答案: