Ionic-framework: 标题栏在状态栏后面向上移动，甚至在表单字段聚焦时完全移出视口

重复 #818

谢谢。 我们正在为 beta2 解决这些键盘错误。

您对可能导致这种情况的原因有任何了解吗？
当您计划发布 beta2 时，我的应用程序已经发布了 ;-)

这是此问题的工作演示：

我刚刚使用“Ionic，v1.0.0-beta.1”通过“入门”过程对此进行了测试。

我的步骤：

• npm install -g 科尔多瓦离子
• ionic start statusBarTest 侧边菜单
• 离子平台添加ios

然后我编辑了app.js以从一个简单的表单开始。 ：

<ion-view title="Form Test">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">

    <div class="list">
      <label class="item item-input">
        <input type="text" placeholder="First Name">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="Middle Name">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="Last Name">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="Address 1">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="Address 2">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="City">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="State">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="Zip Code">
      </label>
    </div>

  </ion-content>
</ion-view>

然后：

• 离子构建ios
• 离子模拟ios

结果如下：

如您所见，键盘将表单向上推入状态栏。

嘿贾斯汀，我相信问题是

试一试，如果有帮助，请告诉我。

在 2014 年 4 月 2 日星期三下午 4:34，Justin Noel通知@github.com 写道：

这是此问题的工作演示：

我刚刚使用“Ionic，
v1.0.0-beta.1”。

我的步骤：

• npm install -g 科尔多瓦离子
• ionic start statusBarTest 侧边菜单
• 离子平台添加ios

然后我编辑了 app.js 以从一个简单的表单开始。 ：

<div class="list">
  <label class="item item-input">
    <input type="text" placeholder="First Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Middle Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Last Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Address 1">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Address 2">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="City">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="State">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Zip Code">
  </label>
</div>

然后：

• 离子构建ios
• 离子模拟ios

结果如下：

[图片：状态栏问题] https://cloud.githubusercontent.com/assets/57374/2597008/fb174690-baad-11e3-80aa-c88985210bcb.gif

如您所见，键盘将表单向上推入状态栏。

直接回复本邮件或在Gi tHub上查看
.

不幸的是，这没有帮助。 在示例项目中，我将其添加到“style.css”中：

body, .ionic-body {
    position: static;
}

即使在 Ionic CSS 文件之后包含“style.css”，这也不起作用。 我还在 Safari 调试中确认position: static已应用于正文。

所以，然后我尝试了没有运气的身体。

body {
    position: static;
}

接下来，我刚刚更新了“ionic.css”文件。 这仍然不起作用。

我还认为您可能打算将标题设为静态； 所以我试了一下。 也没有运气。

啊没看到只有iOS 7.1。 我现在无法使用 Mac，所以我明天先看看。 感谢您帮助调查此事。

感谢贾斯汀的工作演示：+1：

根据您的设置，将.body为position:static不会解决任何问题，因为.pane和.view也具有绝对位置。

在我构建的自定义移动网络应用程序中，标题需要在任何这些重定位元素之外，标题本身设置为position:fixed以在键盘启动时保持在那里。 Android 有一个名为adjust-resize的选项，它可以压缩视图以适合键盘上方。 另一方面，iOS 只需平移视图以将输入居中显示在屏幕上。

Cordova 还有一个名为“KeyboardShrinksView”的首选项，默认为 false。 我还没有看过这个，但它看起来像是 iOS 的解决方案，Android 已经通过调整调整大小做了什么

在这两种差异之间创造和谐是一项艰巨的工作

我们现在正在积极修复键盘以解决所有这些问题。

不幸的是，这个错误在每晚 1717 中没有修复。

@tlancina注意到的一件事是，使用最新的点击修复，如果您直接单击输入，它不会向上移动标题。 所以我认为我们解决了这个问题的一部分。 但是，如果您点击包装输入的标签，则 300 毫秒后它将执行丑陋的本机滚动。 默认的 Ionic css 的工作方式很难区分包装标签和实际输入之间的区别，所以这可能是它并不总是有效的部分原因。 我一直在使用这个测试页面来帮助调试每个设备上的这些问题。

现在我认为原因是因为我们没有阻止标签点击的默认设置。 如果我们在包装输入的标签上执行 e.preventDefault() ，则键盘不会在第一次点击时自动弹出。 我会进一步研究这个，谢谢。

@adamdbradley在此修复程序进入夜间活动时自愿担任此修复程序的另一名测试员。 谢谢。

不幸的是，这个问题在 1.0.0 beta2 中还没有解决。

@CoenWarmer我们已经意识到这些问题，并且仍在努力解决。 另外，请记住，在报告任何键盘问题时，请提供平台、平台版本，以及是移动浏览器、模拟器还是cordova 中的问题，如果是cordova，是否全屏。 其他有用的信息包括您点击的元素，例如标签或输入，您是否必须随时手动滚动才能到达输入，元视口是否具有 height=device-height，以及元素是否为在虚拟键盘最终显示的位置下方，是显示键盘将显示的位置的一半，还是在上方且无需滚动。 谢谢

遇到过：

• iOS7.1.1
• 离子 1.0.0 测试版 2
• （科尔多瓦）
• 在模拟器和设备中
• 不是全屏
• 不使用标签，只输入
• 输入框获得焦点后可以滚动视图，如果输入框没有焦点，则视图无法滚动
• 视图在获得焦点并弹出键盘后不会立即滚动。 当输入字段获得焦点时，您可以将手指放在输入字段上并向上拖动以将视图移出 webview。

也发生在 Android 4.4 和 4.3 上，也使用 1.0.0 beta2。 与iOS7.1完全相同的情况。 因此，当输入字段获得焦点并且键盘弹出时，没有任何问题，这是当输入获得焦点时，然后您将手指放在输入字段上并开始向上或向下拖动它时，您就可以将所有内容移出视图. 稍后将进行截屏。

截屏视频： https :

在 beta2 之后，我在小屏幕（如 iphone3 或 iphone4）上遇到了这个问题。

iphone 5（好）

iphone 4（问题）

@zelphir你能提供一个复制这个问题的代码笔吗？ 它们都是 iOS 7.0 还是 7.1？

@CoenWarmer是您偶然在内容区域中的输入吗？ 我能够复制您的问题的唯一方法是使用不在滚动视图中的输入。

只是为了澄清 - 如果您不使用滚动视图，这是预期的行为。 如果键盘下方有输入，而您无法使用 JS 滚动到它们，那么浏览器将被迫将内容向上移动以使其可见，这就是您能够向上移动所有内容的原因。

@tlancina我的输入不在内容区域内。

这是我正在使用的代码：

<ion-view title="Delegates">
  <div class="search-container">
    <div class="search-inner">
      <input ng-model="searchText" placeholder="Search" ng-enter="ScrollTop()">
    </div>
  </div>

  <ion-tabs class="tabs-icon-only tabs-double">
    <ion-tab title="A-Z">
      <ion-content class="slide-under-header has-header has-tabs has-double-tabs" padding="false" delegate-handle="DelegateScroll">
        <!-- stuff -->
      </ion-content>
    </ion-tab>
    <!-- another ion-tab -->
  <ion-tabs>
</ion-view>

我不确定我是否完全遵循您所说的关于这是预期行为的内容。 现在，当所有内容都在标题下滚动时，该应用程序似乎正在崩溃。 我应该将输入字段放在离子内容中吗？

好吧，假设您有一个包含多个输入的列表，可以到达页面底部。 如果它们不在可以使用 Javascript 滚动到的区域内，如何在键盘出现时将它们显示出来？ 唯一的方法是使用本机浏览器滚动，它通过移动内容来工作 - 所有内容，包括标题。

当输入或可聚焦区域位于 ionic 滚动视图中时，我们会阻止默认滚动并使用 Javascript 将其显示在视图中，而将标题保留在原位。

不幸的是，我不是 ui-router 专家，但尝试将 ion-content 放在页面上的所有内容周围，看看是否有帮助。

我现在明白了 - 但这不会导致整个导航栏消失的不良视觉效果，包括后退按钮吗？

在我的用例中更重要的是，如果我将输入字段放在 ion-content 中，我如何确保它们固定在标题栏下方的顶部，以便过渡动画在 iOS 和 Android 上正常工作？

是的，处理标签并为输入维护可滚动区域的情况似乎非常棘手，而且这种情况肯定会经常发生。 @adamdbradley和我现在正在研究它。

如果你做类似的事情，我不确定我是否理解转换的问题

<ion-content>
  <div class="search-container">
    <div class="search-inner">
      <input ng-model="searchText" placeholder="Search" ng-enter="ScrollTop()">
    </div>
  </div>
</ion-content>

它搞乱了动画吗？ 有多个内容区域很可能会把其他事情搞砸，因为假设可能只有一个。

@tlancina太好了，我没有考虑在一个部分中使用两个离子含量元素。 将看到它是如何工作的并报告回来。

我所指的过渡动画问题发生在某些 Android 版本上。 如果您在元素上使用 position: static 并从该视图过渡到 4.3（我相信，不是 100% 肯定会检查），一旦动画开始，这些元素将保持锁定状态。 因此，所有元素（离子内容、标签、标题栏等）将开始向左移动，但您指定的元素 position: static 将保持在同一位置，直到动画完成。 这不会发生在 iOS 上。 这就是为什么我对在任何地方使用位置静态都犹豫不决。

@tlancina刚刚尝试将输入元素放在一个离子内容中，并将其余内容放在另一个第二个离子内容中。 不幸的是，在 input 元素中输入的任何输入现在将不再过滤其他离子内容中的 ng-repeat。 其他建议？

@CoenWarmer那是因为离子含量创建了一个子作用域。

尝试将控制器放在两个内容上。 如果控制器是，那么不要只对输入使用原语。

您遇到了作用域继承的“点”问题 - 不同子作用域中的原语被设置在子作用域上，而不是在父作用域上。 你懂我的意思吗？ 如果你不知道，让我知道，我会找到一个链接/解释它。

不熟悉它，不幸的是没有。 愿意分享吗？ :)

https://www.youtube.com/watch?v=DTx23w4z6Kc

啊，是的，有道理！ 再试一次：+1：

嘿@亚当。 带输入的页脚怎么样？ 由于它在滚动区域之外，它也会导致问题。 有什么办法吗？

我在 iPad (7.1) 上也有这个问题。 如果未设置，我看到 ionic 在最近更改后将 height=device-height 添加到视口。
由于这个属性，视口变大了大约 200 像素（高度）并且完全可以滚动。
当我删除它时，它起作用了。
如果我将 .view 和 .pane 设置为 position: fixed 和 body to position: static，我可以解决这个问题，但是如果我上下移动手指，主视口仍然很大并且在右侧显示滚动条。

顺便说一句......这与输入焦点无关。 输入焦点仅移动滚动位置，以便您可以看到结果。

各位大侠，目前进展如何？
我创建了一个自定义 ionic 文件并从中删除了附加的 'height=device-height'。
在此更改后，一切正常。 不再需要 CSS 修复，专注于输入字段点击工作正常。
我也在 iOS 上使用键盘插件并执行以下操作：

Keyboard.shrinkView(true);
Keyboard.hideFormAccessoryBar(true);

将输入放在单独的 ion-content 中也不会停止使整个视图（包括标题栏）在输入获得焦点时可在 webview 下方滚动的行为。 发生与我之前的截屏视频相同的行为： https :

@D3CK3R我们正在努力理顺所有不同的视口场景:)

@CoenWarmer你介意运行 Ionic 键盘插件吗？ 我们刚刚将其公之于众，我很想知道它将如何处理滚动视图之外的输入。

您可以通过在 Cordova 项目中运行cordova plugin add https://github.com/driftyco/ionic-plugins-keyboard.git来安装它。

@tlancina有效！ 添加插件后，当输入具有焦点时，内容不再可在视口下拖动。 惊人的！！

插件准备好生产了吗？ 我很想尽快部署它，因为这个项目刚刚发布到商店。

@CoenWarmer你不知道看到你的最后一条评论我有多高兴！ 伟大的工作@tlancina！

@adamdbradley @tlancina

是的！！！

@CoenWarmer是的，适用于 iOS，它已准备好投入生产。 我们在一个刚刚被应用程序商店接受的应用程序中有一个早期版本，我认为我们添加的滚动内容不会被拒绝。 真的很高兴它对你有用！

好关门？ @tlancina

这在 beta14 版本中仍然是一个问题。 经过一些广泛的调试后，我终于找到了修复程序。

就我而言，它与我的meta viewport 。

原始值（导致标题显示在状态栏后面）

<meta name="viewport" content="width=device-width">

新值（修复此问题）

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

我在beta1之前就开始了我的项目 waaaay 所以这可能是我从未注意到的一些遗留 html。

希望这可以帮助某人。

@rvanbaalen我的索引文件中有精确的元视口，但是在我的情况下，当我聚焦输入文本元素时，主体位于状态栏的顶部，从而隐藏了状态栏。 即使键盘向下滑动，状态栏仍然隐藏。

这对我来说仍然是一个问题。 我确实添加了键盘插件。 我正在尝试使用一个简单的 textarea 作为“记事本”，这样它就会填满整个屏幕，就像你看到的我的高度一样：100% 样式。 为了使这些样式起作用，我不得不使用 scroll="false" 禁用滚动，因为高度样式只会扩展到父项的高度。 可能有更好的方法来制作这个“记事本”来避免这个问题，我很感激任何建议。

我在 textarea 中添加了背景颜色，以使下面的屏幕截图更加明显。

我正在使用这个视图：

<ion-modal-view>
    <ion-header-bar class="bar-royal">
        <div class="buttons">
            <button class="button button-clear" ng-click="vm.closeAddNote()">Cancel</button>
        </div>
        <h1 class="title">Add Note</h1>
        <div class="buttons">
            <button class="button button-clear" ng-click="vm.saveNote(vm.noteContent)">Done</button>
        </div>
    </ion-header-bar>
    <ion-header-bar align-title="left" class="bar-subheader bar-stable">
        <h3 class="title">adding note for `client name`</h3>
    </ion-header-bar>
    <ion-content class="has-subheader" scroll="false">
        <div class="list padding" style="height: 100%;">
            <textarea placeholder="Comments" style="height: 100%; width: 100%;" ng-model="vm.noteContent"></textarea>
        </div>
    </ion-content>
</ion-modal-view>

初始视图

单击文本区域后

证明我可以在文本区域获得焦点时滚动。

仍然是一个问题，请帮助@ajoslin @adamdbradley

iOS 模拟器 - iPhone 6 / iOS 8.3
离子版本 1.0.0-rc.0
安装的插件：

• com.ionic.keyboard
• com.phonegap.plugins.PushPlugins
• org.apache.cordova.console
• org.apache.cordova.device
• org.apache.cordova.file
• org.apache.cordova.geolocation
• org.apache.cordova.media

来自模态的 HTML：

<ion-modal-view>
  <ion-header-bar>
    <div class="buttons">
      <ion-button class="button button-clear" ng-click="closeModal()">Cancel</ion-button>
    </div>
    <h1 class="title">Modal View</h1>
    <div class="buttons">
      <ion-button class="button button-clear" ng-click="create()">Create</ion-button>
    </div>
  </ion-header-bar>
  <ion-content>    
    <form>
...
</form>
</ion-content>
</ion-modal-view>

@ravivit9 @mikehaas763 @AshleyRudland
你应该试试

iOS Notes
If the content of your app (including the header) is being pushed up and out of view on input focus, 
try setting cordova.plugins.Keyboard.disableScroll(true). 
This does not disable scrolling in the Ionic scroll view, 
rather it disables the native overflow scrolling that happens automatically as a result of focusing on inputs below the keyboard.

从键盘 ios 笔记

它会像一个魅力。

我可以设置 cordova.plugins.Keyboard.disableScroll(true) 并且仍然希望视图滚动到我的输入吗？
如果我禁用滚动，状态栏不再推出，但键盘与我的输入字段重叠。

@michaelknoch只要您的输入在滚动视图（如 ion-content）内，它就应该自动滚动到视图中，除非您调用了ionic.keyboard.disable() 。

@michaelknoch我想你是问键盘连接

@LightZam但它只支持 ion-footer bar，我的输入在 ion-view 的内容中

@tlancina我应该用 ionScroll 包装我的内容吗？ http://ionicframework.com/docs/api/directive/ionScroll/

@michaelknoch你不应该需要，因为ion-content已经有一个滚动视图。 如果您可以创建一个简单的代码笔来重现该问题，以及您使用的手机和操作系统，以及ionic info命令的输出（如果您使用的是 CLI），我将采用看看。

@tlancina我正面临这个问题
科尔多瓦 CLI：5.2.0
离子版本：1.1.0
离子 CLI 版本：1.6.4
离子应用程序库版本：0.3.8
ios 部署版本：1.7.0
ios-sim 版本：4.1.1
操作系统：Mac OS X 优胜美地
节点版本：v0.12.7
Xcode 版本：Xcode 7.0 构建版本 7A176x
手机 - iphone 4S, ios 7.0.6

如果我保留“cordova.plugins.Keyboard.disableScroll(true)”标题不要推出，但键盘位于我的textarea之上。 我将 textarea（与 msd-elastic 一起使用）保留在里面, 获得类似 whatsapp 的风格，所以它的外部 ion-content

如果我使用键盘连接，那么它会与 msd-elastic 一起搞砸:(
有什么建议 ？

尝试使用 ionic.Platform.fullScreen()
但不走运……这个 fullScreen() 也在 ios 中产生了另一个问题……
它降低了标题的高度...因为当您调用 fullscreen() 时不会应用此 css
.platform-ios.platform- cordova:not (.fullscreen) .bar- header:not (.bar-subheader) {height: 64px; }

在安多瑞德一切都很好。

将 Cordova 升级到 6.0.0 后，我遇到了几乎相同的问题，即当聚焦表单字段时，状态栏出现并与标题栏重叠。 这个问题存在于我的安卓设备上。 我还没有尝试过 iOS 设备。 任何人都可以帮忙吗？

科尔多瓦 CLI：6.0.0
Gulp 版本：CLI 版本 3.8.11
Gulp 本地：本地版本 3.8.11
离子版本：1.0.0-rc.5
离子 CLI 版本：1.7.14
离子应用程序库版本：0.7.0
ios-部署版本：1.8.3
ios-sim 版本：5.0.4
操作系统：Mac OS X El Capitan
节点版本：v0.12.2
Xcode 版本：Xcode 7.2 构建版本 7C68

升级到 Cordova 6.0.0 后，我在 Android 上遇到了这个问题，并通过调用插件https://github.com/mesmotronic/cordova-plugin-fullscreen的 AndroidFullScreen.immersiveMode 方法解决了这个问题

// 隐藏系统 UI 并保持隐藏（仅限 Android 4.4+）
AndroidFullScreen.immersiveMode(successFunction, errorFunction);

这个问题仍然存在，通过全屏解决它不是一个合适的解决方案，因为应用程序不应该真正在全屏上运行，但只是为了测试我尝试过它，虽然应用程序确实进入了全屏模式，但它是仍然“大于”屏幕，因此您可以将标题滚动到状态栏下方......
请帮忙！

有这个问题吗？ 有解决办法吗？

Ionic 2 中的 iOS 也有同样的问题

环境
科尔多瓦 CLI：6.0.0
离子版本：2.0.0-beta.3
离子 CLI 版本：2.0.0-beta.19
离子应用程序库版本：2.0.0-beta.9
ios-deploy 版本：未安装
ios-sim 版本：5.0.6
操作系统：Mac OS X El Capitan
节点版本：v5.7.1
Xcode 版本：Xcode 7.2.1 构建版本 7C1002

如您所见，Ionic 应用程序中的状态栏和标题之间没有任何空间/填充。

键盘的新/旧问题再次出现。 虽然我可以在通过点击聚焦输入时禁用滚动，但如果使用虚拟键盘特殊按钮聚焦表单字段，则再次出现标题滚动出视图的旧问题。 在 Android 键盘上，右下角有一个绿色按钮，可以切换到表单中的下一个输入。 即使我关闭了滚动，按钮也会滚动视图以使聚焦的输入可见，结果标题不在屏幕上。

为了测试这一点，第一个输入必须在视图中并且键盘可见并且第二个输入必须在折叠下方（键盘下方的某个位置）。 现在点击绿色按钮（如图所示）会导致滚动视图并且标题离开屏幕。

科尔多瓦 6.3.0
离子插件键盘 2.2.1
在装有 Android 5 的设备上测试
为 Android 24.0.1 构建

您有关闭此按钮或解决问题的想法吗？ 我不是 100% 确定，但我怀疑这是在cordova升级到6+版本之后开始的。

@rafaellop你解决这个问题了吗？

在 iOS 上打开从手机/相机屏幕上传文件时会出现此问题。

我在使用电子邮件编辑器时遇到了这个问题

编辑对于那些即使在尝试了所有方法后仍然遇到此问题的人，请尝试恢复到[email protected]。 似乎 4.3 可能引入了一些奇怪的行为。 即使是最近的cordova-ios nightlies 似乎也没有解决我的问题，但恢复修复了它。

我的也出现这个问题，还没解决。

在 IOS 中，如果我们点击状态栏整个 ion-content 将在 IONIC2 中闪烁。如何解决此问题。请建议..
谢谢你。

很遗憾，恢复到[email protected]对我没有帮助。 使用本机相机文件库后同样的问题。

刚刚从另一篇文章中意识到我能够将 cordova-statusbar 插件从 2.2.1 降级到 2.2.0 并解决了问题。 在我的情况下，似乎是状态栏插件导致了问题。

我有这个问题

• 离子 3.9.2
• 科尔多瓦-ios 4.4.0
• iOS 10.3
• 各种 iPhone 设备和模拟器

我有一个带有height: 100%;的文本区域（这是所有的离子内容），每当文本区域聚焦时，离子标题就会缩小视图。 我的解决方法是将其更改为height: auto; min-height: 25%;并将 textarea 放入带有height: 100%; margin: 0; padding: 0;和(click)=focusTextArea()的 div 中。 有点笨拙，我希望有一个更好的解决方案，但目前还可以：+1：

请使用这个插件 ionic cordova plugin add cordova-plugin-ionic-webview --save。 它解决了我的问题谢谢

我在结合 email-composer 插件时遇到了同样的问题。

我通过将 cordova-plugin-statusbar 从版本 2.2.1 升级到 2.3.0 解决了这个问题。

@jvhe123我只是尝试这样做，但看起来 v2.3.0 不存在，您是说 v2.2.3 吗？

@glenr4

• 科尔多瓦插件键盘 1.2.0
• 离子插件键盘 2.2.1

我在 iPhone X 上遇到了这个问题。打开键盘将标题向上推，几乎离开页面。

我通过在我的 javaScript 文件中为受影响的页面放置一个 eventListener 来修复它：

document.addEventListener('deviceready', function(e){ window.addEventListener('native.keyboardshow', function () { cordova.plugins.Keyboard.disableScroll(true); }); });

这对我有用，希望它也适用于你们中的一个人。

感谢您的问题！ 此问题已被锁定，以防止发表与原始问题无关的评论。 如果使用最新版本的 Ionic 仍然存在问题，请创建一个新问题并确保模板已完整填写。