【问题标题】:Prevent jquery-mobile popup repositions for Huawei phones after text is entered to an input element将文本输入到输入元素后,防止华为手机的 jquery-mobile 弹出重新定位
【发布时间】:2017-02-15 13:44:24
【问题描述】:

在我们的项目中,我们使用jquery-mobile popup dialog

显示对话框后,当我第一次尝试在手机(华为 P9 lite、Android 6.0.0、Chrome 55.0.2883.91)上填写文本时,弹出窗口会关闭并重新打开。

即使在演示 Form 弹出窗口中,我也能重现此问题。

在稍大一点的设备(5.7 英寸对 5 英寸)、更大的屏幕和几乎相同的 android(6.0.1,相同的浏览器)上不会发生这种情况。

好像是键盘出现后popup自动重新定位造成的。有没有人遇到过类似的问题?你是怎么解决的?

<a href="#popupLogin" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-a" data-transition="pop">Sign in</a>
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
    <form>
        <div style="padding:10px 20px;">
            <h3>Please sign in</h3>
            <label for="un" class="ui-hidden-accessible">Username:</label>
            <input type="text" name="user" id="un" value="" placeholder="username" data-theme="a">
            <label for="pw" class="ui-hidden-accessible">Password:</label>
            <input type="password" name="pass" id="pw" value="" placeholder="password" data-theme="a">
            <button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">Sign in</button>
        </div>
    </form>
</div>

【问题讨论】:

  • 使用带有 data-role="dialog" 的页面,因为您的项目中有 data-position-to="window"
  • 非常感谢,因为我们有相当数量的这些,我会尝试找到一个快速的解决方法,而不是重新处理所有的弹出窗口
  • @deblocker 对话框将在下一版本中删除。
  • @Omar: THX 纠正我的错误,我的意图是建议使用带有 data-dialog="true" 的页面,这已经在 1.4.5 中工作,AFAIK 也将在1.5 - 你确认?
  • @deblocker 不用担心 :) 我不确定这是否能解决 OP 的问题。这都是关于附加到调整大小事件的一些代码。 github.com/jquery/jquery-mobile/blob/…

标签: javascript cordova jquery-mobile popup huawei-mobile-services


【解决方案1】:

答案基于 Omar 的评论。一旦我注释了以下代码行,该行为就不会出现(可能会丢失一个不错的重新定位功能)。

_handleWindowResize: function(/* theEvent */) {
    if ( this._isOpen && this._ignoreResizeTo === 0 ) {
        if ( ( this._expectResizeEvent() || this._orientationchangeInProgress ) &&
            !this._ui.container.hasClass( "ui-popup-hidden" ) ) {
            // effectively rapid-close the popup while leaving the screen intact
            // this._ui.container
            //  .addClass( "ui-popup-hidden ui-popup-truncate" )
            //  .removeAttr( "style" );
        }
    }
},

【讨论】:

  • 你可以添加reposition函数来代替注释代码。
  • @Omar:我想这已经在 1.5 中修复了,至少来自这里的更新日志jQuery Mobile 1.5.0-alpha1 Changelog
  • 感谢分享@deblocker。不幸的是,它还没有发布。
猜你喜欢
  • 2012-01-19
  • 2015-12-29
  • 2015-08-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-06-12
  • 1970-01-01
相关资源
最近更新 更多