jQuery Mobile 选择菜单在弹出窗口中的任意位置打开

Question

>我在弹出窗口中打开了一个简单的表单：

        <div data-role="popup" id="request-form" data-dismissible="false">
            <div class="ui-header">
                <h2>Request Holiday</h2>
            </div>
            <div>
                <div data-role="fieldcontain" class="single-day">
                    <label><b>Date</b>: <span id="date"></span></label>
                    <select id="half-day">
                        <option value="Full">Full Day</option>
                        <option value="Morning">Morning Only</option>
                        <option value="Afternoon">Afternoon Only</option>
                    </select>
                </div>
                <button id="request-button" data-theme="B">Request</button>            
                <button id="cancel-button" data-rel="back">Cancel</button>
            </div>            
        </div>

这工作正常，除了当我单击iOS中的任一按钮，标签或标题时，选择菜单会弹出打开 - 每当弹出窗口中触发单击/点击事件时，它似乎都会获得焦点。 这似乎仅在表单处于弹出窗口中时才会发生。

我

最初打算使用对话框，但这会导致我的原始页面在关闭对话框时失去滚动位置，我更喜欢弹出窗口的外观。

这是一个错误吗？ 有没有办法停止选择自动接收焦点？ 还有其他解决方法吗？

Answer 1

找到了一个黑客解决方案，它涉及扩展弹出小部件，使用相同的代码覆盖方法，但注释掉导致第一个可聚焦元素在单击弹出窗口时获得焦点的代码：

$.widget( "mobile.popup", $.mobile.popup, {
_openPrerequisitesComplete: function() {
    var id = this.element.attr( "id" ),
        firstFocus = this._ui.container.find( ":focusable" ).first();
    this._ui.container.addClass( "ui-popup-active" );
    this._isOpen = true;
    this._resizeScreen();
    // Check to see if currElement is not a child of the container.  If it's not, blur
    if ( !$.contains( this._ui.container[ 0 ], this.document[ 0 ].activeElement ) ) {
        this._safelyBlur( this.document[ 0 ].activeElement );
    }
//  if ( firstFocus.length > 0 ) {
//      this._ui.focusElement = firstFocus;
//  }
    this._ignoreResizeEvents();
    if ( id ) {
        this.document.find( "[aria-haspopup='true'][aria-owns='" +  id + "']" ).attr( "aria-expanded", true );
    }
    this._trigger( "afteropen" );
},
});