window.resize由于虚拟键盘导致问题与jquery移动 [英] 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下。

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.xxjs

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) 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这里：在JQuery Mobile方法中覆盖$ .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 $.mobile in JQuery Mobile method

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