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

问题描述

我要在弹出窗口中打开一个简单的表单:

I have a simple form I'm opening inside a popup:

        <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中的标签或标题时，选择菜单会弹出并打开-每当在弹出窗口中触发click/tap事件时，它似乎都可以接收焦点.似乎仅在窗体处于弹出窗口时会发生这种情况.

Which works fine, except when I click either of the buttons, or the label or the header in iOS, the select menu pops open - it appears to receive focus whenever a click/tap event fires in the popup. This only seems to happen when the form is in a popup.

我最初打算使用对话框，但是当我关闭对话框时，这会使我的原始页面失去其滚动位置，并且我更喜欢弹出窗口的外观.

I originally set out to use a dialog, but that causes my original page to lose it's scrolled position when I close the dialog, and I preferred the look of the popup.

这是一个错误吗?有什么方法可以停止选择自动获得焦点吗?还有其他解决方法吗?

Is this a bug? Is there a way I can stop the select automatically receiving focus? Any other workarounds?

推荐答案

找到了一个hacky解决方案，其中涉及扩展弹出窗口小部件，使用相同代码覆盖方法，但注释掉导致第一个可聚焦元素接收的代码单击弹出窗口时将焦点对准:

Found a hacky solution, which involves extending the popup widget, overriding a method with the same code, but commenting out the code that causes the first focusable element to receive focus when the popup is clicked:

$.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 Mobile选择菜单可在弹出窗口中的任意位置打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！