jQuery 移动设备 Select 在弹出窗口中的任意位置点按即可打开菜单

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 中的 header 时，select 菜单弹出 - 它似乎获得焦点每当 click/tap 事件在弹出窗口中触发时。这似乎只有在表单处于弹出窗口时才会发生。

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

这是一个错误吗？有什么方法可以阻止 select 自动接收焦点吗？还有其他解决方法吗？

Answer 1

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

$.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" );
},
});

jQuery 移动设备 Select 在弹出窗口中的任意位置点按即可打开菜单

jQuery Mobile Select Menu open on tap anywhere in Popup

jquery-mobile