iOS7 的错误显示带有 phonegap 和 Intel App Framework 的软键盘

Posted 2023-03-06

【中文标题】iOS7 的错误显示带有 phonegap 和 Intel App Framework 的软键盘

【英文标题】：Bug with iOS7 showing the soft keyboard with phonegap and Intel App Framework

【发布时间】：2013-09-28 14:15:48

【问题描述】：

我将出色的 Intel AppFramework 用于我的 phonegap / cordova 应用程序的 UI，但从 ios7 开始，有时当我打开键盘时，底部菜单会出现（不应该）： http://screencloud.net/v/9omt 然后，当我关闭键盘时，底部菜单停留在屏幕中间： http://screencloud.net/v/DgRf

看起来 bug 出在 hideAddressBar 函数中。我禁用了这个功能，现在，菜单总是会出现，但至少，当我关闭键盘时，它总是会出现。

（我们使用的是 1.0 版本。我们计划很快更新，但我们正在紧急发布中）

提前感谢您的任何帮助或指示，

【参考方案1】：

这个解决方案对我有用。我的 index.html 中有以下元标记：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

我把它改成这样：

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />

最重要的属性是height=device-height，它表示视图尺寸永远是设备的尺寸。

编辑：iPad 在横向和 iOS7 中存在错误。视口的 CSS 尺寸不对...

【讨论】：

感谢您添加解决方案。我自己的 html5 框架也有同样的问题，这个元标记修复了它。

@Samuel：谢谢。关于 iPad 错误，我观察到设置 height=device-height 后，无论方向如何，视口高度始终为 1024。你遇到过同样的问题吗？你找到解决办法了吗？

【参考方案2】：

我和你在同一条船上，并试图找出一个可行的解决方案。我正在与这里的主要 ios phoengap 贡献者之一合作：https://issues.apache.org/jira/browse/CB-3020

他发布了一个更新的解决方案，并且 3.1 应该很快就会推出补丁修复。

我仍然遇到一些问题，并且底部的黑条随机显示在某些页面上。

前往 cordova jira 网站并添加您的测试详细信息以提供帮助。

谢谢！

【讨论】：

感谢您的链接。我使用的是 Cordova 2.8，元视口就成功了。

【参考方案3】：

虽然塞缪尔的回应应该可以解决问题，但它会产生其他副作用。例如，在 Phonegap 3.3 中，将 height=device-height 添加到视口中，您将在每个屏幕中滚动（即使页面上的元素不足以填满屏幕）。在我们的案例中，唯一的解决方案found here 是在 Phonegap 上的打开键盘上添加一个通知处理程序，它调用一个 javascript 函数，然后在此函数上隐藏固定页脚，除了在焦点/模糊中再次隐藏/显示页脚职能。附加了一个使用 jquery mobile 的示例，但您可以更新它以使用不同的框架：

在 JavaScript 上：

  $(document).on('focus','input, select, textarea',function() 
    if( device.platform=== 'iOS' && parseInt(device.version.substring(0,1)) >= 7)
        if($(this).attr('readonly')===undefined)
            $("[data-role=footer]").hide();
        
      
  );

  $(document).on('blur','input, select, textarea',function()
    if( device.platform=== 'iOS' && parseInt(device.version.substring(0,1)) >= 7)
        if($(this).attr('readonly')===undefined)
            $("[data-role=footer]").show();
        
    
    setTimeout(function() 
        window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
    , 0);
  );

  function hideFooter()
    if( device.platform=== 'iOS' && parseInt(device.version.substring(0,1)) >= 7)
        if($(this).attr('readonly')===undefined) 
            $("[data-role=footer]").hide();
        
    
  

在 phonegap MainViewController.m 中：

- (id)init

    self = [super init];
    if (self) 
        // Uncomment to override the CDVCommandDelegateImpl used
        // _commandDelegate = [[MainCommandDelegate alloc] initWithViewController:self];
        // Uncomment to override the CDVCommandQueue used
        // _commandQueue = [[MainCommandQueue alloc] initWithViewController:self];
        

    //fix for ios7 footer is scrolled up when the keyboard popsup.
    [[NSNotificationCenter defaultCenter] addObserver:self
        selector:@selector(keyboardWillShow:) name:UIKeyboardWillShowNotification object:nil];

    return self;


-(void)keyboardWillShow:(NSNotification*)notification
    if (IsAtLeastiOSVersion(@"7.0"))
        [self.webView stringByEvaluatingJavaScriptFromString:@"hideFooter()"];
    

【讨论】：

我正在使用 PhoneGap Build 来制作我所有的可执行文件（我在 Windows 上）。此文件是否仅在 iOS 平台中可用，或者我在哪里可以找到它？如果是这样，有没有办法为 PG Build 开发实施此修复？

这个文件包含在 iOS 的 Phonegap (./platforms/ios/APPNAME/Classes/MainViewController.m) 中，在 Windows 下你将无法为 iOS 编译（可能使用 phonegap 云编译系统，但我不知道）。