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

找到了一个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 Mobile Select菜单

1 个答案: