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

问题描述

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

• JQuery Mobile 1.1


• JQuery 8.2


• PhoneGap（Cordova）2.1

在iPhone上的应用程序的许多页面上，如果我将光标放入输入框，这将打开虚拟键盘。这是很好的和预期的。

以下是问题：在某些情况下（但不是全部），将光标放入输入框将触发window.resize事件。我已经通过以下代码验证了这一点：

  $（window）.resize（function（e）{
警告（'窗口调整大小发生！宽度：'+ $（窗口）.width（）+高度：+ $（窗口）.height（））; 
调试器; 
返回false; 
}）; 
  

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

了解最佳方法是使用截图：

现在，我真的不希望任何人有一个确切的答案。我只是在寻找调试提示。我在我的window.resize（）事件中添加了一个调试器语句，并尝试逐步通过代码。我希望能够引导一些其他调整大小的监听器，用于调整页面大小。如果我能找到，那么当有人选择一个表单元素时，我可以暂时瘫痪，然后重新启用在模糊或方向更改上调整大小。问题是，我通过了每一行代码，调试过程在调整大小发生之前停止。

这让我想知道是否有其他事件被释放来自window.resize。所以我添加了以下两行：

  document.addEventListener（throttledresize，function（）{alert（throttledresize fired。 ）}，false）; 
 document.addEventListener（orientationchange，function（）{alert（orientationchange fired。）}，false）; 
  

所以我有点卡住了我有一个很好的感觉，我知道问题是什么，但我无法追溯到源头。任何建议，我可以找到这个神秘的代码，调整window.resize（）的页面大小？

解决方案

我很高兴看到我不是疯了！我很高兴地报告我已经实施了一个很好的解决方案。以下是步骤，以防您要执行相同操作：

1）进入jquery.mobile-1.xxjs

2）找到$ .mobile = $ .extend（）并添加以下属性：

  last_width：null，
 last_height：null，
  

3）修改getScreenHeight工作如下：

  getScreenHeight：function（）{
 // Native innerHeight在平台上返回更准确的值，
 // jQuery版本在这里作为Symbian 
 
之间的平台的归一化后退如果（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重新计算页面高度，除非宽度也改变。 （即方向更改）由于软键盘仅影响高度，此方法将返回缓存值而不是修改的高度。

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

  delete $ .mobile.getScreenHeight; 
 $ .mobile.last_width = null; 
 $ .mobile.last_height = null; 
 $ .mobile.getScreenHeight = function（）
 {
 ...上面列出的代码
} 
  

它大部分时间都被触发，但也触发了原来的功能。有点奇怪。关于如何正确地扩展$ .mobile，我已经发布了一个单独的主题：在$ .mobile中覆盖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

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.

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;
    });

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:

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.

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);

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) Go into jquery.mobile-1.x.x.js

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;
}

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.

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
}

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屋！