Ionic-framework: 键盘打开时自动隐藏标签

是的，我假设您使用的是Android。 老键盘问题...

我在@tlancina 的PhoneGap conf 上看到了关于键盘的讨论，总的来说，这似乎是一个相当困难的问题！
我可以确认，在我的 Android 应用程序中打开键盘时，底部标签栏也被向上推。 但更糟糕的是覆盖靠近底部的输入字段。 蒂姆说，应该尽量避免这种情况，但不幸的是，我的项目中有很长的列表需要编辑。
我已经推迟了整个键盘主题，等待看看它在 ionic 中的表现如何。

此外， @tlancina ，是否有关于在 ionic 中使用键盘的最佳实践教程（集成 ionic 键盘插件、初始化/设置事件处理程序）？

我也遇到了这个问题。

我们的项目中也有同样的问题。 有没有这方面的计划？

嘿，伙计们，也感到痛苦-有任何消息吗？

还需要这个很棒的功能，标签，甚至可能是标题很好，以便能够隐藏。

@jgw96我注意到您在此添加了增强标签。 由于本机应用程序的行为不同（在键盘上方移动选项卡）并且选项卡也将实际内容空间限制为几行，尤其是在较小的手机上，这不应该被认为是一个更严重的问题吗？

对于寻找临时解决方案的人，这就是我所做的：

TabsComponent 构造函数：

platform.ready().then(() => {
            Keyboard.onKeyboardShow().subscribe(() => {
                document.body.classList.add('keyboard-is-open');
            });

            Keyboard.onKeyboardHide().subscribe(() => {
                document.body.classList.remove('keyboard-is-open');
            });
});

CSS内部：

body.keyboard-is-open ion-tabbar {
  display: none;
}

body.keyboard-is-open scroll-content {
  margin-bottom: 0 !important;
}

如果您在页面上有多个选项卡，这将不起作用，但我想您可以直接使用 CSS 选择它们。

我目前正在运行 Ionic beta 11

这事有进一步更新吗？

@bvx89谢谢。
为了那些在Rc0上的人，css 略有变化

body.keyboard-is-open .tabbar {
  display: none;
}

body.keyboard-is-open .scroll-content {
  margin-bottom: 0 !important;
}

还没有官方解决方案

顺便提一下，在 Android 上启用全屏模式也为我解决了这个问题。
这可以通过设置来完成
<preference name="Fullscreen" value="true" />
在 config.xml 中，如果您使用的是早于 v5.0.0 的 cordova android 平台，则可以选择添加 cordova-plugin-fullscreen。

这是否将在下一个版本中与将要修复的其余键盘问题一起修复（在另一个线程中阅读有关键盘问题的说明）或者这是否落在了裂缝之间？

@RaymondAtivie
我也有同样的问题，下个版本会解决吗？

它在 RC3 中对我不起作用。
onKeyboardShow() 永远不会被解雇......

+1，我也有同样的问题。

科尔多瓦 CLI：6.3.1
离子 CLI 版本：2.1.8
离子应用程序库版本：2.1.4
ios-deploy 版本：未安装
ios-sim 版本：未安装
操作系统：Windows 8.1
节点版本：v6.4.0
Xcode 版本：未安装

我有同样的问题， @RaymondAtivie发布的解决方法不太正确。 选项卡不再可见，但似乎仍然可见顶部边框。 其他人有这个问题吗？ 我试过添加
box-shadow: none; border-top: none;
并且仍然以从标签栏可见的相同顶部边框结束。 有任何想法吗？

我通过转动ion-content选项fullscreen="true"解决了这个问题
并为标签栏设置隐藏样式

      var tabbars =     document.getElementsByClassName('tabbar');
      for(var i=0; i<tabbars.length; i++) {
        var node = <HTMLElement>tabbars[i];
        node.style.display = hide === true && 'none' || 'block';
      }

我已经尝试过了，即使标签栏设置为显示 false，仍然显示相同的顶部边框。

@payneBrandon我在隐藏顶栏
<ion-header *ngIf="isShowHeader()">

我的 ion-tab 位于底部，因此隐藏标题不会对其产生太大影响。 我附上了我正在谈论的内容的屏幕截图。 显示了键盘，底部的选项卡被隐藏了，但如果我四处滚动，似乎仍然有一些顶部边界线保持在原位。

这个栏看起来像表单的一部分
你能分享你的html代码吗？

终于想通了。 我不必担心页眉，因为我的标签位于底部，但我确实需要查看页脚（呃！）。 如果正文有键盘打开类和 BAM，我将条件类应用于页脚以隐藏它，重新开始工作。 谢谢您的帮助！

@payneBrandon祝你好运

也希望看到该功能。
另外我认为ion-footer应该支持键盘打开/关闭的可见性

我做了一个简单的修复（当然不理想）。 .scroll-content有margin-bottom的56px ，相同的高度有标签。 我检查键盘：

public keyboardCheck() {
        return this.keyboard.isOpen();
}

然后将此类附加到ion-content的父级.scroll-content ：

.keyboard-open .scroll-content {
    margin-bottom: 0px !important;
}

并将其添加到ion-content ：

<ion-content padding [ngClass]="{'keyboard-open': keyboardCheck()}">

当键盘打开时，我还使用tabs.html的相同方法隐藏了选项卡：

<ion-tabs [ngClass]="{'remove-tabs': keyboardCheck()}">

.remove-tabs .tabbar {
    display: none;
}

我只为需要修复的页面执行此操作。

在 iOS 和 Android 上工作。

解决了

这是一个正确的解决方案，除了 css 标记。

```
从'@angular/core'导入{组件}；
从 'ionic-native' 导入 {Keyboard}
从'../home/home'导入{主页}；
从'../about/about'导入{ AboutPage }；
从'../contact/contact'导入{ ContactPage}；

@零件（{
模板网址：'tabs.html'
})
导出类 TabsPage {
// 这告诉标签组件哪些页面
// 应该是每个选项卡的根页面
tab1Root：任何=主页；
tab2Root: any = AboutPage;
tab3Root: any = ContactPage;
值forngif =真；

构造函数（公共键盘：键盘）{}
ionViewDidEnter(){
Keyboard.onKeyboardShow().subscribe(()=>{this.valueforngif=false})
Keyboard.onKeyboardHide().subscribe(()=>{this.valueforngif=true})
}}

this my tabs.html

    ```
 <ion-tabs *ngIf="valueforngif">
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle" [tabsHideOnSubPages]="true"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

不错@efnan34 ，尽管您不需要在构造函数中提供它。

这导致我的键盘在打开时自动关闭...这是因为焦点返回到选项卡以隐藏它们，这反过来又使键盘关闭？

ionViewDidEnter(){
    Keyboard.onKeyboardShow().subscribe(()=>{this.valueforngif=false})
    Keyboard.onKeyboardHide().subscribe(()=>{this.valueforngif=true})
}

@bvx89您的解决方案是我唯一可以使用 Ionic 2.1.0 的解决方案。 为 ionic-native 记录了一个错误，并且未检测到更改，因此其他解决方法对我不起作用。 期待官方解决这个问题

我有同样的问题@Killmore
还没有官方的解决方案吗？

你好
上面的解决方案也可以在 Ionic 2.1.0 上运行，但是可以使用更好的结果 [hidden] attrb 代替 *ngif。我在我的项目中使用这个解决方案，它工作正常

祝你今天过得愉快

以上会导致某些 android 设备上的闪烁，这确实是一个糟糕的选择。

这会工作..试试这个

var originalHeight = document.documentElement.clientHeight;
var originalWidth = document.documentElement.clientWidth;
$(窗口).resize(函数() {
// 控制横向/纵向模式切换
if (document.documentElement.clientHeight == originalWidth &&
document.documentElement.clientWidth == originalHeight) {
originalHeight = document.documentElement.clientHeight;
originalWidth = document.documentElement.clientWidth;
}
// 检查可用高度是否更小（显示键盘），因此我们隐藏页脚。
if (document.documentElement.clientHeight < originalHeight) {
$('.footer').hide();
} 别的 {
$('.footer').show();
}
});

这就是我解决这个问题的方法：

选项卡.ts

import { Component, ElementRef, Renderer, ViewChild } from '@angular/core';
import { Events, Tabs } from 'ionic-angular';

import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  @ViewChild('myTabs') tabRef: Tabs;
  mb: any;
  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;

  constructor(private elementRef: ElementRef, private renderer: Renderer, private event: Events) {

  }
  ionViewDidLoad() {
    let tabs = this.queryElement(this.elementRef.nativeElement, '.tabbar');
    this.event.subscribe('hideTabs', () => {
      this.renderer.setElementStyle(tabs, 'display', 'none');
      let SelectTab = this.tabRef.getSelected()._elementRef.nativeElement;
      let content = this.queryElement(SelectTab, '.scroll-content');
      this.mb = content.style['margin-bottom'];
      this.renderer.setElementStyle(content, 'margin-bottom', '0')
    });
    this.event.subscribe('showTabs', () => {
      this.renderer.setElementStyle(tabs, 'display', '');
      let SelectTab = this.tabRef.getSelected()._elementRef.nativeElement;
      let content = this.queryElement(SelectTab, '.scroll-content');
      this.renderer.setElementStyle(content, 'margin-bottom', this.mb)
    })
  }
  queryElement(elem: HTMLElement, q: string): HTMLElement {
    return <HTMLElement>elem.querySelector(q);
  }
}

特定页面.ts

import { Component } from '@angular/core';
import { NavController, Events } from 'ionic-angular';

import { Keyboard } from '@ionic-native/keyboard';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, private event: Events, private keyboard: Keyboard) {

  }
  ionViewDidLoad() {
    this.keyboard.onKeyboardShow().subscribe(() => this.event.publish('hideTabs'));
    this.keyboard.onKeyboardHide().subscribe(() => this.event.publish('showTabs'));
  }
}

归功于 dPary

我真的希望你们都在进行正确的设备测试，因为所有这些隐藏选项卡的解决方案都会导致视图在设备上重新呈现，这会导致非常明显的闪烁，并且在某些情况下会崩溃。 无论如何，一切顺利。

是的，我和@cozzbie 在一起，所有这些都只是一些技巧。 我们需要团队@ionitron @manucorporat 提供真正的官方解决方案

+1 我们需要一个官方解决方案，这些修复程序都不适合生产使用。

当前版本的 ionic 可以自行完成

21 Nis 2017 17:12 tarihinde "Ruben Callewaert" [email protected]
亚兹迪：

+1 我们需要一个官方解决方案，这些修复都不适合
生产使用。

—
你收到这个是因为你被提到了。
直接回复此邮件，在 GitHub 上查看
https://github.com/driftyco/ionic/issues/7047#issuecomment-296201358 ，
或使线程静音
https://github.com/notifications/unsubscribe-auth/AVskkCpgFZZRbrd56ILc5nIPZICRTclUks5ryLlCgaJpZM4I-H1S
.

这真的是照顾。 我仍然看到标签栏。 在撰写 ionic-angular 3.2.0 时运行最新版本。

它在 2.xx 版本上运行得很好，但现在我检查了 3.xx 版本
出了点问题。它不会在屏幕上隐藏你想要的东西，直到
在键盘上打字。不幸的是，我们找到了其他解决方案或降级
你的离子版本到任何 2.xx

2017 年 5 月 12 日 ÖÖ 3:32 tarihinde "vazad28" [email protected]

这真的是照顾。 我仍然看到标签栏。 运行最新
写这篇文章时的版本 ionic-angular 3.2.0。

—
你收到这个是因为你被提到了。
直接回复此邮件，在 GitHub 上查看
https://github.com/driftyco/ionic/issues/7047#issuecomment-300952251 ，
或使线程静音
https://github.com/notifications/unsubscribe-auth/AVskkNkEdzsMkkrhGW0l9OUW2BKly-PSks5r46ingaJpZM4I-H1S
.

这里只是一个想法。 使用上述任何技巧隐藏选项卡会导致设备上的视图刷新，那么我们将选项卡区域的高度降为零而不是隐藏怎么样？ 只是一个想法，但我现在太投入了，无法尝试。

+1 官方修复！ “ display:none ” 方法会导致不可接受的闪烁，并且选项卡渲染一次然后消失......看起来很粗糙和hacky。 （任何人有任何想法如何摆脱闪烁？如果它对用户来说看起来不错，我不会在黑客之上）

关于这个问题有什么新的吗？ 在我失去希望并开始实施一些会影响 UI 质量的东西之前仍在等待官方修复

@patrickmcd ，大拇指之王，只是想知道您是否尝试戒掉这个习惯？

@viking2917您可以尝试我建议的 hack 并尝试将标签高度强制为零。 那可能行得通。 不过我还没试过。

不幸的是，用 CSS 隐藏标签会导致很多问题。 Ionic 会计算一些值，例如ion-content上的边距，并考虑选项卡的存在（隐藏）。

我们不得不删除解决方案，因为其他组件出现了一些定位问题。

@Khalid-Nowaf 我根本不喜欢垃圾评论，这些评论会浪费时间远离 Ionic 团队和远离这个 repo 的约 2000 名观察者。

@Floyd1256的评论是轻率的垃圾邮件。 它没有给谈话增添任何内容。 这只是另一个“加一个/我们还在那里”的评论，仅用于填写我们的收件箱。

我的反对意见是试图推动其他人采取更体贴的行为。 在发表评论之前，我们应该记住我们正在与大约 2000 人进行对话，他们的时间很宝贵。 我们不应该像对待朋友的个人 IM 聊天那样轻率地对待这个空间。 我们应该扪心自问，我们的评论是否会帮助或阻碍他人，是促进对话还是只是噪音，是否真的有必要说或可以通过Github 反应更好地表达，以及它是否会加速或减缓开发。

似乎有一个分支与其他一些问题一起解决了这个问题https://github.com/ionic-team/ionic/tree/keyboard-fixes
这个提交特别看起来很有希望

我没有勇气去超过ionic v1。

我制作了这个补丁（我放入了受影响视图的控制器，因为我只有一个带有这个组合的控制器）。

/* HACK Al mostrar el teclado el tabbar se pone encima de él en android /var bottom_stored=0;window.addEventListener('native.keyboardshow', function (e) {angular.element(document.getElementsByClassName('tab-nav')).addClass('hide');bottom_stored = angular.element(document.getElementsByClassName('has-tabs')).css('bottom');angular.element(document.getElementsByClassName('has-tabs')).css('bottom','0px');$scope.$apply();});window.addEventListener('native.keyboardhide', function (e) {angular.element(document.getElementsByClassName('tab-nav')).removeClass('hide');angular.element(document.getElementsByClassName('has-tabs')).css('bottom',bottom_stored);$scope.$apply();});/哈克 */

这行得通

就我而言，这只发生在我使用 android 时，最好的解决方案是更改 config.xml 中 android 标记上的属性

<platform name="android"> <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity"> <activity android:windowSoftInputMode="adjustPan" /> </edit-config>

只需简单地添加以下几行，因此 AndroidManifest.xml 中的 android 构建在android:windowSoftInputMode 中有adjustPan ，这将导致键盘覆盖所有内容而不是向上推动屏幕。

对于上面解释的@Jatapiaro的方法，我安装了以下科尔多瓦插件：

cordova plugin add cordova-custom-config

然后我刚刚将以下内容添加到我的 config.xml

<platform name="android">
    <preference name="android-manifest/application/activity/<strong i="10">@android</strong>:windowSoftInputMode" value="adjustPan" />
    ...
</platform>

在 Android 和 iOS 上工作

这是我动态隐藏键盘的方法：

在我的 TS 文件中：

@ViewChild('foot') foo_ter: ElementRef;
  constructor(private platform: Platform, private keyboard: Keyboard) {
    this.platform.ready().then(() => {
      this.keyboard.onKeyboardShow().subscribe(() => {
        this.foo_ter.nativeElement.hidden = true;
      });
      this.keyboard.onKeyboardHide().subscribe(() => {
        this.foo_ter.nativeElement.hidden = false;
      });
    });
  }

然后在我的 HTML 文件中，我创建了一个名为#footer的模板变量，这就是我在上面的 TS 中引用的内容，如下所示：

<ion-footer no-border style="padding:5%;" #footer>
  <ion-item no-lines>
   Don't have an account?
    <button ion-button style="text-align:center;" bold item-end clear no-lines clear (click)="signup()">
      Sign Up
    </button>
  </ion-item>
</ion-footer>

我希望它也对你有用:-)

我在 Ionic V3 中以这种方式给出了它。 工作得很好。
TS文件
ionViewDidEnter() {
if (this.keyboard.isOpen())
this.showTabs = false;
别的
this.showTabs = true;
}

HTML 文件

达斯达

asd

不是真的答案

对此官方解决方案是否有任何更新？

截至今天.. 与 Ionic v
我无法让@ionic-native/keyboard 工作。 正如许多其他人所说.. onKeyboardShow() 事件永远不会触发。
cordova-keyboard-plugin 也已被弃用。

所以对我有用的是......
cordova plugin add cordova-plugin-ionic-keyboard --save
发布这个..我按照他们的自述文件中的描述添加了 window.addEventListener

不要忘记删除事件监听器，以防您离开标签页并再次返回它..

````打字稿
// MyTabs.ts
显示监听器（）{
console.log('键盘可见');
document.body.classList.add('keyboard-is-open');
}
隐藏监听器（）{
console.log('键盘隐藏');
document.body.classList.remove('keyboard-is-open');
}

ionViewDidEnter() {
window.addEventListener('keyboardWillShow', this.showListener);
window.addEventListener('keyboardDidHide', this.hideListener);
}

ionViewWillLeave() {
window.removeEventListener('keyboardWillShow', this.showListener);
window.removeEventListener('keyboardDidHide', this.hideListener);
}
````

起初为我工作。 当我在显示键盘时第一次单击输入时，标签栏被隐藏了。 在我单击另一个输入后，标签栏再次显示。 所以在我的情况下，标签栏只有在我首先点击输入字段时才被隐藏。

有什么建议吗？ @dharapvj

大家好，虽然它与“隐藏”标签栏不同，但这个解决方案对我来说效果很好，因为它允许键盘遮挡标签栏而不是向上推。

在您的主 config.xml 中，编辑 android 平台以包含以下内容：

    <platform name="android">
        ...
        <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity">
            <activity android:windowSoftInputMode="adjustPan" />
        </edit-config>
    </platform>

这样做是修改 Cordova 写入 AndroidManifest.xml 的默认值，以控制应用程序的全局键盘输入行为。

...如果您在下一个版本中检查 AndroidManifest.xml，您会看到android:windowSoftInputMode= “adjustResize”的默认值更改为“adjustPan”，从而允许标签栏被遮挡。

@codymbeardsley 非常感谢！ 这个解决方案对我有用； 至少对于 android 这是一个很好的解决方案。 当键盘打开时，而不是推动工具栏，键盘只是隐藏页脚！

完美运行！
谢谢@codymbeardsley

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