window.resize 由于虚拟键盘导致 jquery mobile 出现问题 [英] window.resize due to virtual keyboard causes issues with jquery mobile

问题描述

我遇到了一个不寻常的问题，我正在寻找建议.基本上，我正在使用:

I'm hitting an unusual problem and I'm looking for suggestions. Basically, I'm using:

• JQuery Mobile 1.1
• JQuery 8.2
• PhoneGap (Cordova) 2.1

在 iPhone 上我的应用程序的许多页面上，如果我将光标放入输入框中，则会打开虚拟键盘.这很好，在意料之中.

On many pages in my app on iPhone, if I put my cursor into an input box, this opens the virtual keyboard. That's fine and expected.

问题在于:在某些情况下(但不是全部)，将光标置于输入框中会触发 window.resize 事件.我已经通过以下代码验证了这一点:

Here's the problem: In some cases (but not all), placing my cursor into an input box fires the window.resize event. I've verified this via the code below:

    $(window).resize(function(e) {
        alert('The window resize occurred!  Width: ' + $(window).width() + " Height: " + $(window).height());
        debugger;
        return false;
    });

在解决 window.resize 事件后，JQueryMobile 立即决定将页面大小调整为不正确的高度.我可以说它是页面，因为我为每个元素添加了不同的颜色边框以查看是什么.在许多情况下，这种调整大小操作会导致我的一半 GUI 溢出到 div 底部下方，有时甚至使我的光标隐藏在 div 下.

Immediately after it resolves the window.resize event, JQueryMobile decides to resize the page to an incorrect height. I can tell it is the page because I added a different color border to each element to see what was what. And in many cases, this resize action is causing half of my GUI to overflow underneath the bottom of the div, sometimes even making my cursor appear hidden under the div.

最好的理解方式是截图:

The best way to understand it is with a screenshot:

现在，我真的不希望有人对此有确切的答案.我只是在寻找调试技巧.我在 window.resize() 事件中添加了一个调试器"语句，并尝试单步执行代码.我希望被引导到其他一些旨在调整页面大小的调整大小侦听器.如果我能找到，那么当有人选择一个表单元素时，我可以暂时削弱它，然后在模糊或方向改变时重新启用调整大小.问题是，我逐行执行了每一行代码，并且调试过程在调整大小发生之前就停止了.

Now, I don't really expect anyone to have an exact answer for this. I'm just looking for debugging tips. I added a "debugger" statement into my window.resize() event and tried to step through the code. I was hoping to be lead to some other resize listener that is designed to resize the page . If I can find that, then I can temporarily cripple it when someone selects a form element, then re-enable resizing on blur or orientation change. The problem is, I stepped through every line of code and the debug process stops right before the resize occurs.

这让我想知道除了 window.resize 之外是否还有其他一些事件被触发.所以我添加了以下两行:

This makes me wonder if there is some other event being fired aside from window.resize. So I added the two lines below:

    document.addEventListener("throttledresize", function() { alert("throttledresize fired.") }, false);
    document.addEventListener("orientationchange", function() { alert("orientationchange fired.") }, false);

然而，两者都没有被解雇.所以我有点卡住了.我有一种很好的感觉，我知道问题出在哪里，但我无法追溯到源头.关于我在哪里可以找到这个在 window.resize() 上调整页面大小的神秘代码的任何建议?

Neither fired, however. So I'm somewhat stuck. I have a good feeling I know what the problem is, but I can't trace it to the source. Any suggestions on where I can find this mysterious code that resizes the page on window.resize()?

推荐答案

我很高兴看到我没有发疯！我很高兴地报告我已经实施了一个非常好的解决方案.如果您想执行相同的操作，请按以下步骤操作:

I'm glad to see I'm not crazy! I'm happy to report I've implemented a pretty good solution. Here are the steps, in case you'd like to do the same:

1) 进入 jquery.mobile-1.x.x.js

1) Go into jquery.mobile-1.x.x.js

2) 找到 $.mobile = $.extend() 并添加以下属性:

2) Find $.mobile = $.extend() and add the following attributes:

last_width: null,
last_height: null,

3) 修改 getScreenHeight 的工作方式如下:

3) Modify getScreenHeight to work as follows:

getScreenHeight: function() {
    // Native innerHeight returns more accurate value for this across platforms,
    // jQuery version is here as a normalized fallback for platforms like Symbian

    if (this.last_width == null || this.last_height == null || this.last_width != $( window ).width())
    {
        this.last_height = window.innerHeight || $( window ).height();
        this.last_width = $(window).width();
    }
    return this.last_height;
}

基本上这将阻止 jQuery 重新计算页面高度，除非宽度也发生变化.(即方向改变)由于软键盘只影响高度，此方法将返回缓存值而不是修改后的高度.

Basically this will prevent jQuery from recalculating the page height unless the width also changes. (i.e. an orientation change) Since the soft keyboard only affects the height, this method will returned the cached value instead of a modified height.

我将创建一个单独的帖子来询问如何正确覆盖 $.mobile.getScreenHeight 方法.我尝试将下面的代码添加到单独的 JS 文件中，但没有奏效:

I'm going to create a separate post to ask how to properly override the $.mobile.getScreenHeight method. I tried adding the code below into a separate JS file, but it didn't work:

delete $.mobile.getScreenHeight;
$.mobile.last_width = null;
$.mobile.last_height = null;
$.mobile.getScreenHeight = function() 
{
   ... the code listed above
}

大部分时间它都会触发，但也会触发原始函数.有点奇怪.我在这里发布了一个关于如何正确扩展 $.mobile 的单独主题:在 $.mobile 中覆盖 JQuery Mobile 方法的正确方法

It fired most of the time, but also fired the original function. Kinda weird. I've posted a separate topic in regard to how to properly extend $.mobile here: Proper way to overide a JQuery Mobile method in $.mobile

这篇关于window.resize 由于虚拟键盘导致 jquery mobile 出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！