IOS 9中 ionic header 被键盘顶出屏幕

ddcat 发表于 2016-2-27 17:52:27

本帖最后由 ddcat 于 2016-2-27 17:54 编辑

IOS 9，当input获得焦点的时候，弹出键盘，会把ionic的header顶到屏幕外面，导致状态条文字和内容重叠。

ionic的文档里写：
如果在input获取焦点时，你app的内容（包含header）被挤到上面或视图以外，就需要尝试设置cordova.plugins.Keyboard.disableScroll(true)。
但是在app.js内加入：
$ionicPlatform.ready(function() {
   if(window.cordova && window.cordova.plugins.Keyboard) {
   cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
   cordova.plugins.Keyboard.disableScroll(true);
   }
并没有什么效果，不知道是哪里设置不对么？
此时，我想将系统的状态条设置为黑色背景，这样可以覆盖下面的文字。
但是我添加了StatusBar插件，在app.js内加入：
   if(window.StatusBar) {
   StatusBar.styleBlackOpaque();
   }
也是没有效果。

求解救！！！

ionicwang 发表于 2016-2-27 20:34:05

截个图瞅瞅

ddcat 发表于 2016-2-27 20:48:47

ionicwang 发表于 2016-2-27 20:34
截个图瞅瞅

正常情况：

当键盘弹出来：

谢谢！！

ionicwang 发表于 2016-2-29 09:14:08

.run([ '$rootScope', '$state', '$stateParams','$ionicPlatform','Storage', function ($rootScope,$state,$stateParams,$ionicPlatform,Storage) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
      if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
         cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      }
   if (window.StatusBar) {
      // org.apache.cordova.statusbar required
         StatusBar.styleLightContent();
      }

      document.addEventListener("deviceready",function onDeviceReady() {
         // console.log('设备id：'+device.uuid);
         Storage.set('device_id',device.uuid);
      }, false);

});下面这个插件配置一下，ios有输入框内容向上是正常的，但是导航栏应该是不会动的

if (window.StatusBar) {
      // org.apache.cordova.statusbar required
         StatusBar.styleLightContent();
      }

ddcat 发表于 2016-2-29 11:57:54

ionicwang 发表于 2016-2-29 09:14
下面这个插件配置一下，ios有输入框内容向上是正常的，但是导航栏应该是不会动的

if (window.StatusBar ...

安卓里面，header是不会顶上去的，只是ios里会顶上去。
我在controller里添加disableScroll(true)，则键盘又会覆盖掉输入框。

我的另一个app，ios中并没有这个问题，看来还是哪里设置的不对了。

StatusBar 我昨天试了一天，但是只能改变文字为白色，背景色却一直是透明的。
我尝试网上说的，把webview的高度下移20px，但是这样仍然无法解决整个儿webview被顶上去的问题。

admin 发表于 2016-2-29 13:36:27

org.apache.cordova.statusbar 安装这个插件按照楼上的方式试试

ios中输入框就是顶上去的

ddcat 发表于 2016-2-29 16:05:30

admin 发表于 2016-2-29 13:36
org.apache.cordova.statusbar 安装这个插件按照楼上的方式试试

ios中输入框就是顶上去的 ...

我的问题不是输入框被顶上去，而是ionic 的 header 被顶得看不到了。

ddcat 发表于 2016-2-29 17:44:44

崩溃了。。。。

刚才又编译了一下，问题消失了。{:3_63:}
nav-bar不会被顶出去了。。。。。。
真是白白浪费了两天时间。。。。。。{:3_49:}
谢谢楼上的帮助了。。。。

15689705887 发表于 2016-3-9 17:31:28

楼主求助啊，我也遇到了跟你一样的情况。ionic开发的ios <input>标签填写内容，页面就会放大把下面的导航栏顶出屏幕去找不到。然后我也按照楼上所说的
if (window.StatusBar) {
      // org.apache.cordova.statusbar required
         StatusBar.styleLightContent();
      }
跟你说的： cordova.plugins.Keyboard.disableScroll(true);
都加上了，插件什么的都装了。导出ipa测试还是会把导航顶没{:4_87:}

ionicwang 发表于 2016-3-9 20:15:58

15689705887 发表于 2016-3-9 17:31
楼主求助啊，我也遇到了跟你一样的情况。ionic开发的ios 标签填写内容，页面就会放大把下面的导航栏顶出 ...

多方一些内容网上拉然后看看header在哪里

页: [1] 2

PhoneGap中文网's Archiver

IOS 9中 ionic header 被键盘顶出屏幕