Ionic-framework: キーボードが開いているときにタブを自動的に非表示にする

ええ、私はあなたがAndroidの下にいると思います。 古いキーボードの問題...

@tlancinaのPhoneGapconfでキーボードについての話を見ましたが、一般的にはかなり難しい問題のようです。
Androidでアプリのキーボードを開くと、下のタブバーが押し上げられていることも確認できます。 しかし、さらに悪いのは、下部にある入力フィールドをカバーすることです。 ティムは、それを避けるように努めるべきだと言いましたが、残念ながら、私のプロジェクトでは編集する長いリストがあります。
私はキーボードのトピック全体を延期して、それがイオンでどのように機能するかを確認しました。

さらに、 @ 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;
}

1つのページに複数のタブがある場合、これは機能しませんが、CSSで直接選択できると思います。

私は現在Ionicベータ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、同じ問題があります。

Cordova CLI：6.3.1
Ionic CLIバージョン：2.1.8
Ionic App Libバージョン：2.1.4
ios-deployバージョン：インストールされていません
ios-simバージョン：インストールされていません
OS：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()">

私のイオンタブは下部にあるので、ヘッダーを非表示にしてもあまり影響はありません。 私が話していることのスクリーンショットを添付しました。 キーボードが表示され、下部のタブは非表示になっていますが、スクロールしても所定の位置にとどまるトップボーダーラインがあるように見えます。

このバーはフォームの一部のように見えます
HTMLコードを共有できますか？

ついにそれを理解した。 タブが下にあるのでヘッダーについて心配する必要はありませんでしたが、フッターを見る必要がありました（ええと！）。 ボディにkeyboard-is-openクラスとBAMがある場合は、フッターに条件付きクラスを適用して非表示にしました。 助けてくれてありがとう！

@payneBrandon頑張ってください

その機能も見たいです。
また、 ion-footerは、キーボードの開閉時の可視性をサポートする必要があると思います

私は簡単な修正を行いました（もちろん理想的ではありません）。 .scroll-contentにはmargin-bottomの56pxあり、同じ高さにタブがあります。 キーボードをチェックします：

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

次に、このクラスをion-contentの親である.scroll-content ion-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マークを除いて適切なソリューションです。

`` `
import {Component} from '@ angle / core';
'ionic-native'から{Keyboard}をインポートします
import {HomePage} from '../ home / home';
import {AboutPage} from '../ about / about';
import {ContactPage} from '../ contact / contact';

@成分（{
templateUrl： 'tabs.html'
}）
エクスポートクラスTabsPage {
//これはタブコンポーネントにどのページを通知します
//各タブのルートページである必要があります
tab1Root：any = HomePage;
tab2Root：any = AboutPage;
tab3Root：any = ContactPage;
valueforngif = true;

コンストラクター（パブリックキーボード：キーボード）{}
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あなたのソリューションは、私が

私は同じ問題を抱えています@Killmore
これに対する公式の解決策はまだありませんか？

こんにちは
上記のソリューションはIonic2.1.0でも実行されますが、より良い結果[非表示] attrbを* ngifの代わりに使用できます。私のプロジェクトでこのソリューションを使用すると、正常に機能します。

良い1日を

上記は一部のAndroidデバイスでちらつきを引き起こし、実際には悪いオプションです。

これはうまくいくでしょう..これを試してください

var originalHeight = document.documentElement.clientHeight;
var originalWidth = document.documentElement.clientWidth;
$（window）.resize（function（）{
//ランドスケープ/ポートレートモードスイッチを制御します
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（）;
}
}）;

これが私がこの問題を解決した方法です：

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

特定のpage.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

+1公式の解決策が必要ですが、これらの修正はいずれも本番環境での使用には理想的ではありません。

イオンの現在のバージョンはそれ自体でそれを行います

21 Nis 2017 17:12 tarihinde "RubenCallewaert" [email protected]
yazdı：

+1公式の解決策が必要です。これらの修正はどれも理想的ではありません。
生産使用。

—
あなたが言及されたので、あなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/driftyco/ionic/issues/7047#issuecomment-296201358 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AVskkCpgFZZRbrd56ILc5nIPZICRTclUks5ryLlCgaJpZM4I-H1S
。

これは本当にお世話になっていますか。 まだタブバーが表示されます。 この執筆のように最新バージョンを実行します。ionic-angular3.2.0。

2.xxバージョンでは非常にうまく機能していましたが、3.xxバージョンをチェックしました
何かがおかしいです。それはあなたが画面に望むものを隠すまで
キーボードで入力します。残念ながら、他のソリューションがダウングレードされています。
任意の2.xxへのイオンバージョン

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

これは本当にお世話になっていますか。 まだタブバーが表示されます。 最新の実行
この記述のバージョンは、ionic-angular3.2.0です。

—
あなたが言及されたので、あなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/driftyco/ionic/issues/7047#issuecomment-300952251 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AVskkNkEdzsMkkrhGW0l9OUW2BKly-PSks5r46ingaJpZM4I-H1S
。

ここで考えてみてください。 上記のハックのいずれかを使用してタブを非表示にすると、デバイスでビューが更新されます。非表示にする代わりに、タブゾーンの高さをゼロに下げるのはどうでしょうか。 考えただけですが、私は今、あまりにも関わっていて、試してみることができません。

公式修正のために+1！ 「 display：none 」アプローチは許容できないちらつきを引き起こし、タブがレンダリングされると消えます...ひどくハッキーに見えます。 （ちらつきを取り除く方法を誰かが知っていますか？ユーザーにとって見栄えが良ければ、私はハックを超えていません）

この問題に関して何か新しいことはありますか？ 希望を失い、UIの品質に影響を与える何かの実装を開始する前に、まだ公式の修正を待っています

@patrickmcd 、サムズダウンの主、あなたはこの習慣をやめようとしているのだろうか？

@ viking2917私が提案したハックを試して、タブの高さをゼロに強制してみてください。 それはうまくいくかもしれません。 まだ試していません。

残念ながら、CSSでタブを非表示にすると、多くの問題が発生します。 Ionicは、 ion-contentマージンなどのいくつかの値を計算し、タブ（非表示）の存在を考慮に入れます。

他のコンポーネントでいくつかの位置決めの問題が発生したため、ソリューションを削除する必要がありました。

@ Khalid-Nowaf Ionicチームから、そしてこのリポジトリの〜2000人のウォッチャーから時間を奪うスパムコメントには感謝しません。

@ Floyd1256のコメントは軽率なスパムです。 会話には何も追加されません。 これは、受信トレイを埋めるだけの「プラスワン/まだありますか」というコメントです。

私の反対票は、他の人をより思いやりのある行動に向けて動かそうとする試みです。 コメントの前に、我々は時間がprecious_ある_whose我々は〜2000人と会話をしていることを覚えておいてください。 友人との個人的なIMチャットのように、このスペースを派手に扱うべきではありません。 私たちのコメントが他の人を助けるか妨げるか、会話を進めるのか単なるノイズなのか、 Githubの反応で本当に言う必要があるのか​​、それとももっとうまく声を出すことができるのか、そしてそれが開発を加速するのか遅くするのかを自問する必要があります。

他のいくつかと一緒にこの問題に対処するブランチがあるようですhttps://github.com/ionic-team/ionic/tree/keyboard-fixes
このコミットは特に非常に有望に見えます

イオンv1以上に行く勇気はありません。

このパッチを作成します（このコンボには1つしかないため、影響を受けるビューのコントローラーを配置します）。

/ * HACK Al mostrar el teclado el tabbar seponeencimadeélenandroid /var bottom_stored = 0;window.addEventListener（ 'native.keyboardshow'、function（e）{angle.element（document.getElementsByClassName（ 'tab-nav'））。addClass（ 'hide'）;bottom_stored = angle.element（document.getElementsByClassName（ 'has-tabs'））。css（ 'bottom'）;angle.element（document.getElementsByClassName（ 'has-tabs'））。css（ 'bottom'、 '0px'）;$ scope。$ apply（）;}）;window.addEventListener（ 'native.keyboardhide'、function（e）{angle.element（document.getElementsByClassName（ 'tab-nav'））。removeClass（ 'hide'）;angle.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プラグインをインストールしました。

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というテンプレート変数を作成します

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

私はそれがあなたにもうまくいくことを願っています：

私はIonicV3でこのようにそれを与えました。 完全に正常に動作します。
TSファイル
ionViewDidEnter（）{
if（this.keyboard.isOpen（））
this.showTabs = false;
それ以外
this.showTabs = true;
}

HTMLファイル

dasda

asd

本当の答えではない

このための公式ソリューションに関する更新はありますか？

今日の時点で..Ionicvを使用
@ ionic-native / keyboardを動作させることができませんでした。 他の多くの人が述べたように..onKeyboardShow（）イベントは決して発生しません。
また、cordova-keyboard-pluginは非推奨になりました。

だから私のために働いたのは...
cordova plugin add cordova-plugin-ionic-keyboard --save
自分で説明したようにこれを投稿..私はwindow.addEventListenerを追加README

タブページを離れて再び戻ってきた場合に備えて、イベントリスナーを削除することを忘れないでください。

`` `` typescript
// MyTabs.ts
showListener（）{
console.log（ 'キーボード表示'）;
document.body.classList.add（ 'keyboard-is-open'）;
}
hiddenListener（）{
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どうもありがとうございました！ この解決策は私のために働きます。 少なくともアンドロイドにとっては、それは良い解決策です。 キーボードが開いているときは、ツールバーをはフッターを非表示にします。

完璧に動作します！
ありがとう@codymbeardsley

問題をありがとう！ この問題は、元の問題に関連しないコメントを防ぐためにロックされています。 これが最新バージョンのIonicで引き続き問題になる場合は、新しい問題を作成し、テンプレートが完全に入力されていることを確認してください。