Ionic-framework: Sembunyikan tab secara otomatis saat keyboard terbuka

Ya, saya berasumsi Anda menggunakan Android. Masalah keyboard lama ...

Saya melihat pembicaraan di PhoneGap conf dari @tlancina tentang keyboard dan sepertinya itu masalah yang cukup sulit secara umum!
Saya dapat mengonfirmasi bahwa bilah tab bawah didorong ke atas saat membuka keyboard di aplikasi saya di bawah Android juga. Tetapi jauh lebih buruk lagi mencakup bidang input yang berada di dekat bagian bawah. Tim berkata, seseorang harus mencoba menghindarinya, tetapi sayangnya ada daftar panjang yang harus diedit di proyek saya.
Saya telah menunda seluruh topik keyboard untuk menunggu dan melihat bagaimana hasilnya dalam ionic.

Selain itu, @tlancina , apakah ada tutorial praktik terbaik tentang penggunaan keyboard di ionic (mengintegrasikan plugin keyboard ionic, init/setting event handler)?

Saya juga mengalami masalah ini.

Kami juga mengalami masalah yang sama dalam proyek kami. Ada rencana tentang ini?

Hai teman-teman, juga merasakan sakit - ada kabar?

juga membutuhkan fitur hebat ini, tab dan bahkan mungkin header yang bagus untuk dapat disembunyikan.

@ jgw96 Saya perhatikan Anda menambahkan label peningkatan ini. Karena aplikasi asli tidak berperilaku sama (memindahkan tab di atas keyboard) dan tab juga membatasi konten sebenarnya hanya beberapa baris, terutama pada ponsel yang lebih kecil, bukankah ini harus dianggap sebagai masalah yang lebih serius?

Untuk orang yang mencari solusi sementara, inilah yang saya lakukan:

Konstruktor TabsComponent:

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

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

Di dalam CSS:

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

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

Ini tidak akan berfungsi jika Anda memiliki banyak tab pada satu halaman, tetapi saya rasa Anda dapat memilihnya dengan CSS Anda secara langsung.

Saat ini saya menjalankan Ionic beta 11

ada pembaruan tentang ini?

@bvx89 Terima kasih.
Demi yang di Rc0 ada sedikit perubahan pada css

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

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

Belum ada solusi resmi

Hanya untuk menyebutkan bahwa mengaktifkan mode Layar Penuh di Android juga memperbaiki masalah ini untuk saya.
Ini dapat dilakukan dengan mengatur
<preference name="Fullscreen" value="true" />
di config.xml, dan secara opsional menambahkan cordova-plugin-fullscreen jika Anda menggunakan platform android cordova yang lebih lama dari v5.0.0.

Apakah ini akan diperbaiki di versi berikutnya bersama dengan masalah keyboard lainnya yang akan diperbaiki (baca sesuatu yang menyatakan bahwa tentang masalah keyboard di utas lain) atau apakah ini jatuh di antara celah-celah?

@RaymondAtivie
saya memiliki masalah yang sama, Apakah ini akan diperbaiki di versi berikutnya?

Ini tidak bekerja untuk saya di RC3.
onKeyboardShow() tidak pernah dipecat...

+1， saya memiliki masalah yang sama.

Cordova CLI: 6.3.1
Versi CLI Ionik: 2.1.8
Versi Lib Aplikasi Ionic: 2.1.4
versi ios-deploy: Tidak diinstal
versi ios-sim: Tidak diinstal
OS: Windows 8.1
Versi Node: v6.4.0
Versi Xcode: Tidak diinstal

Saya memiliki masalah yang sama, dan solusi yang diposting oleh @RaymondAtivie tidak berfungsi dengan benar. tab tidak lagi terlihat, tetapi tampaknya ada batas atas yang masih terlihat. Adakah orang lain yang memiliki masalah ini? Saya sudah mencoba menambahkan
box-shadow: none; border-top: none;
dan masih berakhir dengan batas atas yang sama terlihat dari tabbar. Ada ide?

Saya telah memecahkan masalah ini dengan mengubah opsi fullscreen="true" ion-content fullscreen="true"
dan mengatur gaya tersembunyi untuk tabbar

      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';
      }

Saya sudah mencoba ini dan masih menunjukkan batas atas yang sama meskipun bilah tab disetel ke tampilan salah.

@payneBrandon Saya menyembunyikan bilah atas
<ion-header *ngIf="isShowHeader()">

Tab ion saya ada di bagian bawah, jadi menyembunyikan tajuk tidak terlalu memengaruhinya. Saya telah melampirkan tangkapan layar dari apa yang saya bicarakan. Keyboard ditampilkan, tab di bagian bawah disembunyikan, tetapi masih tampak ada beberapa baris papan atas yang tetap di tempatnya jika saya menggulir.

bilah ini terlihat seperti bagian dari formulir
boleh share kode htmlnya?

Akhirnya ketahuan. Saya tidak perlu khawatir tentang tajuk karena tab saya ada di bagian bawah, TAPI saya perlu melihat ke footer (duh!). Saya menerapkan kelas bersyarat ke footer untuk menyembunyikannya jika badan memiliki kelas keyboard-is-open dan BAM, kembali dalam bisnis. Terima kasih untuk bantuannya!

@payneBrandon semoga sukses

Ingin melihat fitur itu juga.
Saya juga berpikir bahwa ion-footer harus mendukung visibilitas pada keyboard buka/tutup

Saya telah membuat perbaikan sederhana (tentu saja tidak ideal). .scroll-content memiliki margin-bottom dari 56px , ketinggian yang sama memiliki tab. Saya memeriksa papan kunci:

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

dan kemudian lampirkan kelas ini ke ion-content , induk dari .scroll-content :

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

dan tambahkan ini ke ion-content :

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

Saya juga menyembunyikan tab ketika keyboard terbuka menggunakan metode yang sama di tabs.html :

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

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

Saya melakukan ini hanya untuk halaman yang perlu saya perbaiki.

Bekerja di iOS dan Android.

TERPECAHKAN

ini solusi yang tepat kecuali css ditandai.

```
impor { Komponen } dari '@angular/core';
impor {Keyboard} dari 'ionic-native'
import { HomePage } dari '../home/home';
impor { AboutPage } dari '../about/about';
impor { Halaman Kontak } dari '../kontak/kontak';

@Komponen({
templateUrl: 'tabs.html'
})
kelas ekspor TabsPage {
// ini memberi tahu komponen tab Halaman mana
// harus menjadi halaman root setiap tab
tab1Root: any = Halaman Beranda;
tab2Root: any = AboutPage;
tab3Root: any = Halaman Kontak;
nilaiforngif=benar;

konstruktor (keyboard publik: Keyboard) {}
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>

nice @efnan34 , meskipun Anda tidak perlu menyediakannya di konstruktor.

Ini menyebabkan keyboard saya menutup secara otomatis saat membukanya... Apakah ini karena fokus kembali ke tab untuk menyembunyikannya yang pada gilirannya membuat keyboard menutup?

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

@ bvx89 Solusi Anda adalah satu-satunya yang bisa saya gunakan dengan Ionic 2.1.0. Ada bug yang dicatat untuk ionic-native dan perubahan tidak terdeteksi sehingga pekerjaan lain tidak berfungsi untuk saya. Menantikan perbaikan resmi untuk ini

Saya mengalami masalah yang sama @Killmore
apakah belum ada solusi resmi untuk ini?

Halo
Solusi di atas berjalan pada Ionic 2.1.0 juga tetapi hasil yang lebih baik [tersembunyi] attrb dapat digunakan sebagai pengganti *ngif.Saya menggunakan solusi ini di proyek saya, ini berfungsi dengan baik

Semoga harimu menyenangkan

Di atas akan menyebabkan kedipan pada beberapa perangkat android dan benar-benar merupakan pilihan yang buruk.

Ini akan Berhasil .. coba ini

var originalHeight = document.documentElement.clientHeight;
var originalWidth = document.documentElement.clientWidth;
$(jendela).resize(fungsi() {
// Kontrol sakelar mode lanskap/potret
if (document.documentElement.clientHeight == originalWidth &&
document.documentElement.clientWidth == originalHeight) {
originalHeight = document.documentElement.clientHeight;
originalWidth = document.documentElement.clientWidth;
}
// Periksa apakah ketinggian yang tersedia lebih kecil (keyboard ditampilkan) jadi kami menyembunyikan footer.
if (document.documentElement.clientHeight < originalHeight) {
$('.footer').sembunyikan();
} kalau tidak {
$('.footer').show();
}
});

Inilah cara saya memecahkan masalah ini:

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

halaman tertentu.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'));
  }
}

kredit untuk dPary

Saya sangat berharap Anda semua melakukan pengujian perangkat yang tepat karena semua solusi yang menyembunyikan tab ini menyebabkan tampilan dirender ulang pada perangkat yang akan menyebabkan kedipan yang sangat terlihat dan dalam beberapa kasus macet. Bagaimanapun, semua yang terbaik.

Ya, saya bersama @cozzbie semua ini hanyalah beberapa peretasan. Kami membutuhkan solusi resmi nyata oleh tim @ionitron @manucorporat

+1 Kami membutuhkan solusi resmi, tidak satu pun dari perbaikan ini yang ideal untuk penggunaan produksi.

Versi ionik saat ini melakukannya sendiri

21 Nis 2017 17:12 tarihinde "Ruben CALLEWAERT" [email protected]
yazd:

+1 Kami membutuhkan solusi resmi, tidak ada perbaikan yang ideal untuk
penggunaan produksi.

—
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub
https://github.com/driftyco/ionic/issues/7047#issuecomment-296201358 ,
atau matikan utasnya
https://github.com/notifications/unsubscribe-auth/AVskkCpgFZZRbrd56ILc5nIPZICRTclUks5ryLlCgaJpZM4I-H1S
.

Apakah ini benar-benar diurus. Saya masih melihat bilah tab. Menjalankan versi terbaru seperti pada tulisan ini ionic-angular 3.2.0.

Ini bekerja sangat baik dengan versi 2.xx tetapi sekarang saya memeriksa versi 3.xx
ada sesuatu yang salah. itu tidak menyembunyikan apa yang Anda inginkan di layar sampai
mengetik di keyboard. Sayangnya kami telah menemukan solusi lain atau diturunkan versinya
versi ionik Anda ke 2.xx

12 Mei 2017 3:32 tarif "vazad28" [email protected] yazdı:

Apakah ini benar-benar diurus. Saya masih melihat bilah tab. Berjalan terbaru
versi seperti pada tulisan ini ionic-angular 3.2.0.

—
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub
https://github.com/driftyco/ionic/issues/7047#issuecomment-300952251 ,
atau matikan utasnya
https://github.com/notifications/unsubscribe-auth/AVskkNkEdzsMkkrhGW0l9OUW2BKly-PSks5r46ingaJpZM4I-H1S
.

Hanya sebuah pemikiran di sini. Menyembunyikan tab menggunakan salah satu peretasan di atas menyebabkan tampilan disegarkan di perangkat, jadi bagaimana kalau kita turunkan ketinggian zona tab ke nol alih-alih bersembunyi? Hanya sebuah pemikiran tetapi saya terlalu terlibat sekarang untuk mencobanya.

+1 untuk perbaikan resmi! Pendekatan " display:none " menyebabkan kedipan yang tidak dapat diterima, dan tab ditampilkan sekali kemudian menghilang...terlihat kotor dan berantakan. (ada yang punya ide bagaimana menghilangkan flicker? Saya tidak di atas hack jika terlihat bagus untuk pengguna)

Ada yang baru tentang masalah ini? masih menunggu perbaikan resmi sebelum saya kehilangan harapan dan mulai menerapkan sesuatu yang akan memengaruhi kualitas UI

@patrickmcd , The Lord of The Thumbs Down, hanya ingin tahu apakah Anda mencoba menghentikan kebiasaan ini?

@ viking2917 Anda dapat mencoba peretasan yang saya sarankan dan coba paksa tinggi tab menjadi nol. Itu mungkin berhasil. Padahal saya belum mencobanya.

Sayangnya menyembunyikan tab dengan CSS akan menyebabkan sejumlah masalah. Ionic menghitung beberapa nilai seperti margin pada ion-content dan memperhitungkan keberadaan tab (yang disembunyikan).

Kami harus menghapus solusinya karena beberapa masalah pemosisian dengan komponen lain terjadi.

@Khalid-Nowaf Saya sama sekali tidak menghargai komentar spam yang menghabiskan waktu jauh dari tim Ionic dan jauh dari ~2000 pengamat repo ini.

Komentar @Floyd1256 adalah spam yang tidak pengertian. Itu tidak menambahkan apa pun ke percakapan. Itu hanyalah komentar "plus one / are we there yet" yang hanya berfungsi untuk mengisi inbox kita.

Downvotes saya adalah upaya untuk mendorong orang lain ke arah perilaku yang lebih perhatian. Sebelum berkomentar, kita harus ingat bahwa kita sedang mengobrol dengan ~2000 orang _yang waktunya sangat berharga_ . Kita seharusnya tidak memperlakukan ruang ini dengan sembrono seperti halnya obrolan IM pribadi dengan teman-teman. Kita harus bertanya pada diri sendiri apakah komentar kita akan membantu atau menghalangi orang lain, apakah itu memajukan percakapan atau hanya kebisingan, apakah itu benar-benar perlu untuk dikatakan atau lebih baik disuarakan dengan reaksi Github , dan apakah itu akan mempercepat atau memperlambat pengembangan.

Tampaknya ada cabang yang menangani masalah ini bersama dengan yang lain https://github.com/ionic-team/ionic/tree/keyboard-fixes
Komitmen ini khususnya terlihat sangat menjanjikan

Saya tidak memiliki keberanian untuk pergi lebih dari v1 ionik.

Saya membuat tambalan ini (saya memasukkan pengontrol tampilan yang terpengaruh, karena saya hanya memiliki satu dengan kombo ini).

/* 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('sembunyikan');bottom_stored = angular.element(document.getElementsByClassName('has-tabs')).css('bottom');angular.element(document.getElementsByClassName('has-tabs')).css('bottom','0px');$lingkup.$terapkan();});window.addEventListener('native.keyboardhide', function (e) {angular.element(document.getElementsByClassName('tab-nav')).removeClass('hide');angular.element(document.getElementsByClassName('has-tabs')).css('bottom',bottom_stored);$lingkup.$terapkan();});/ HACK */

ini bekerja

Dalam kasus saya ini hanya terjadi ketika saya menggunakan Android, solusi terbaik adalah mengubah properti pada tag Android di config.xml

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

Cukup tambahkan baris berikut, jadi build Android di AndroidManifest.xml memiliki adjustPan di android:windowSoftInputMode , ini akan menyebabkan keyboard menutupi semua konten alih-alih mendorong layar ke atas.

Untuk pendekatan @Jatapiaro yang dijelaskan di atas, saya telah menginstal plugin cordova berikut:

cordova plugin add cordova-custom-config

Kemudian saya baru saja menambahkan yang berikut ini ke config.xml saya

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

Bekerja di Android & iOS

Inilah yang saya lakukan untuk menyembunyikan keyboard secara dinamis:

di file TS saya:

@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;
      });
    });
  }

kemudian di file HTML saya, saya membuat variabel template bernama #footer yang saya referensikan di TS di atas seperti ini:

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

Saya harap ini bekerja untuk Anda juga :-) @RaymondAtivie

Saya memberikannya dengan cara ini di Ionic V3. Bekerja dengan baik.
berkas TS
ionViewDidEnter() {
jika (this.keyboard.isOpen())
this.showTabs = salah;
kalau tidak
this.showTabs = benar;
}

berkas HTML

dasda

asd

jawaban tidak benar

Apakah ada pembaruan pada solusi resmi untuk ini?

Mulai hari ini.. dengan Ionic v
Saya tidak bisa membuat @ionic-native/keyboard berfungsi. Seperti yang dinyatakan banyak orang lain.. acara onKeyboardShow() tidak pernah menyala.
juga cordova-keyboard-plugin telah ditinggalkan.

Jadi yang berhasil bagi saya adalah...
cordova plugin add cordova-plugin-ionic-keyboard --save
posting ini.. Saya menambahkan window.addEventListener seperti yang dijelaskan dalam readme mereka

jangan lupa untuk menghapus pendengar acara jika Anda meninggalkan halaman tab dan kembali lagi..

```` naskah yang diketik
// Tab Saya.ts
acaraPendengar() {
console.log('keyboard terlihat');
document.body.classList.add('keyboard-is-open');
}
sembunyikanListener() {
console.log('keyboard disembunyikan');
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);
}
````

Pada awalnya di bekerja untuk saya. Ketika saya pertama kali mengklik input ketika keyboard ditampilkan, tabbar disembunyikan. Setelah saya mengklik input lain, tabbar muncul lagi. Jadi dalam kasus saya tabbar hanya disembunyikan ketika saya mengklik bidang input pada awalnya.

Ada saran? @dharapvj

Hai semuanya, meskipun tidak sama dengan "menyembunyikan" bilah tab, solusi ini bekerja dengan baik untuk saya dengan membiarkan keyboard mengaburkan bilah tab alih-alih mendorongnya ke atas.

Di config.xml utama Anda, edit platform android untuk menyertakan yang berikut:

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

Apa yang dilakukan adalah memodifikasi nilai default yang ditulis Cordova ke AndroidManifest.xml Anda untuk mengontrol perilaku input keyboard global untuk aplikasi Anda.

...dan jika Anda memeriksa AndroidManifest.xml pada build berikutnya, Anda akan melihat bahwa default android:windowSoftInputMode= "adjustResize" diubah menjadi "adjustPan", sehingga memungkinkan bilah tab dikaburkan.

@codymbeardsley Terima kasih banyak! Solusi ini bekerja untuk saya; setidaknya untuk android itu adalah solusi yang baik. Saat Keyboard terbuka, alih-alih menekan bilah alat , keyboard hanya menyembunyikan footer !

Bekerja Sempurna!
Terima kasih @codymbeardsley

Terima kasih untuk masalah ini! Masalah ini sedang dikunci untuk mencegah komentar yang tidak relevan dengan masalah asli. Jika ini masih menjadi masalah dengan versi terbaru Ionic, harap buat masalah baru dan pastikan template terisi penuh.