Ionic-framework: Ocultar automaticamente as guias quando o teclado está aberto

Sim, suponho que você esteja no Android. O velho problema do teclado...

Eu vi uma palestra no PhoneGap conf da @tlancina sobre o teclado e parece ser uma questão bem difícil em geral!
Posso confirmar que a barra de guias inferior também é pressionada ao abrir o teclado no meu aplicativo no Android. Mas muito pior é cobrir os campos de entrada que estão perto da parte inferior. Tim disse, deve-se tentar evitar isso, mas infelizmente existem longas listas para editar no meu projeto.
Eu adiei todo o tópico do teclado para esperar e ver como ele se desenrola em iônico.

Além disso, @tlancina , existe um tutorial de práticas recomendadas sobre como usar o teclado em ionic (integrando o plug-in de teclado ionic, init/setting event handlers)?

Estou passando por esse problema também.

Estamos tendo o mesmo problema em nosso projeto também. Algum plano em relação a isso?

Olá pessoal, também sentindo a dor - alguma notícia por acaso?

também precisa desse ótimo recurso, abas e pode até ser cabeçalho legal para poder esconder.

@ jgw96 Percebi que você adicionou o rótulo de aprimoramento a isso. Como os aplicativos nativos não se comportam da mesma forma (movendo guias acima do teclado) e as guias também limitam o espaço real do conteúdo a apenas algumas linhas, especialmente em telefones menores, isso não deveria ser considerado um problema mais sério?

Para pessoas que procuram uma solução temporária, aqui está o que eu fiz:

Construtor TabsComponent:

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

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

Dentro do CSS:

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

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

Isso não funcionará se você tiver várias guias em uma página, mas acho que você pode selecioná-las diretamente com seu CSS.

Atualmente estou executando o Ionic beta 11

alguma atualização disso?

@bvx89 Obrigado.
Para o bem de quem está em Rc0 há uma pequena mudança no css

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

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

Ainda não há solução oficial

Apenas para mencionar que ativar o modo de tela cheia no Android também corrige esse problema para mim.
Isso pode ser feito configurando
<preference name="Fullscreen" value="true" />
em config.xml e, opcionalmente, adicionando cordova-plugin-fullscreen se você estiver usando uma plataforma Android cordova anterior à v5.0.0.

Isso será corrigido na próxima versão, juntamente com o restante dos problemas de teclado que serão corrigidos (leia algo informando isso sobre problemas de teclado em outro tópico) ou isso caiu entre as rachaduras?

@Raymond Ativie
Eu tenho o mesmo problema, isso será corrigido na próxima versão?

Não está funcionando para mim no RC3.
o onKeyboardShow() nunca é acionado...

+1, eu tenho o mesmo problema.

Córdoba CLI: 6.3.1
Versão Ionic CLI: 2.1.8
Versão Ionic App Lib: 2.1.4
Versão do ios-deploy: Não instalado
Versão do ios-sim: Não instalado
SO: Windows 8.1
Versão do nó: v6.4.0
Versão do Xcode: Não instalado

Eu tenho esse mesmo problema, e a solução postada por @RaymondAtivie não está funcionando muito bem. as guias não estão mais visíveis, mas parece haver uma borda superior ainda visível. Alguém mais tem esse problema? Eu tentei adicionar
box-shadow: none; border-top: none;
e ainda terminar com a mesma borda superior visível na barra de guias. Alguma ideia?

Resolvi esse problema ativando a opção ion-content fullscreen="true"
e definindo o estilo oculto para a barra de guias

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

Eu tentei isso e ainda tenho a mesma borda superior sendo exibida, mesmo que a barra de guias esteja configurada para exibir false.

@payneBrandon estou escondendo a barra superior
<ion-header *ngIf="isShowHeader()">

Minha guia de íons está na parte inferior, portanto, ocultar o cabeçalho não o afeta muito. Anexei uma captura de tela do que estou falando. O teclado é mostrado, as guias na parte inferior estão ocultas, mas ainda parece que há alguma linha de borda superior que permanece no lugar se eu rolar ao redor.

esta barra parece uma parte do formulário
você pode compartilhar seu código html?

Finalmente descobri. Eu não precisei me preocupar com um cabeçalho, pois minhas guias estão na parte inferior, MAS eu precisei olhar para o rodapé (duh!). Apliquei uma classe condicional ao rodapé para escondê-lo se o corpo tiver a classe teclado está aberto e BAM, de volta aos negócios. Obrigado pela ajuda!

@payneBrandon boa sorte

Gostaria de ver esse recurso também.
Também acho que ion-footer deve suportar a visibilidade no teclado abrir/fechar

Eu fiz uma correção simples (claro que não é o ideal). O .scroll-content tem um margin-bottom de 56px , a mesma altura tem as abas. Eu verifico o teclado:

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

e, em seguida, anexe esta classe a ion-content , um pai de .scroll-content :

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

e adicione isso a ion-content :

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

Eu também escondi as guias quando o teclado está aberto usando o mesmo método em tabs.html :

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

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

Eu fiz isso apenas para a página que eu precisava da correção.

Trabalhando em iOS e Android.

RESOLVIDO

esta é uma solução adequada, exceto css marcada.

```
importe { Componente } de '@angular/core';
importe {Keyboard} de 'ionic-native'
import { HomePage } de '../home/home';
import { AboutPage } from '../about/about';
import { ContactPage } de '../contact/contact';

@Componente({
templateUrl: 'tabs.html'
})
export class TabsPage {
// isso informa ao componente de guias quais páginas
// deve ser a página raiz de cada guia
tab1Root: qualquer = HomePage;
tab2Root: qualquer = AboutPage;
tab3Root: qualquer = ContactPage;
valorforngif=true;

construtor(teclado público:Teclado) { }
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 , embora você não precise fornecê-lo no construtor.

Isso está fazendo com que meu teclado feche automaticamente ao abri-lo... Isso é devido ao foco voltando para as guias para escondê-las, o que por sua vez faz com que o teclado feche?

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

@ bvx89 Sua solução é a única que consegui trabalhar com o Ionic 2.1.0. Há um bug registrado para ionic-native e as alterações não foram detectadas, então as outras soluções alternativas não funcionaram para mim. Ansioso para uma correção oficial para isso

Estou tendo o mesmo problema @Killmore
não há nenhuma solução oficial para isso ainda?

Olá
A solução acima também é executada no Ionic 2.1.0, mas um melhor resultado [hidden] attrb pode ser usado em vez de *ngif. Estou usando esta solução no meu projeto, funciona bem

Tenha um bom dia

Acima causará uma cintilação em alguns dispositivos Android e realmente é uma opção ruim.

Isso vai funcionar .. tente isso

var originalHeight = document.documentElement.clientHeight;
var originalWidth = document.documentElement.clientWidth;
$(janela).resize(function() {
// Controla a troca do modo paisagem/retrato
if (document.documentElement.clientHeight == originalWidth &&
document.documentElement.clientWidth == originalHeight) {
originalHeight = document.documentElement.clientHeight;
originalWidth = document.documentElement.clientWidth;
}
// Verifique se a altura disponível é menor (o teclado é mostrado) para ocultar o rodapé.
if (document.documentElement.clientHeight < originalHeight) {
$('.footer').hide();
} senão {
$('.footer').show();
}
});

Foi assim que resolvi esse problema:

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

página específica.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'));
  }
}

créditos para dPary

Eu realmente espero que todos vocês estejam fazendo um teste de dispositivo adequado, porque todas essas soluções que ocultam guias fazem com que a visualização seja renderizada novamente em dispositivos, o que causará uma cintilação muito visível e, em alguns casos, travamentos. De qualquer forma, tudo de bom.

Sim, estou com @cozzbie tudo isso são apenas alguns truques. Precisamos de uma solução oficial real da equipe @ionitron @manucorporat

+1 Precisamos de uma solução oficial, nenhuma dessas correções é ideal para uso em produção.

A versão atual do ionic faz isso por conta própria

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

+1 Precisamos de uma solução oficial, nenhuma dessas correções é ideal para
uso de produção.

—
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/driftyco/ionic/issues/7047#issuecomment-296201358 ,
ou silenciar o thread
https://github.com/notifications/unsubscribe-auth/AVskkCpgFZZRbrd56ILc5nIPZICRTclUks5ryLlCgaJpZM4I-H1S
.

Isso é realmente cuidado. Eu ainda vejo a barra de guias. Executando a versão mais recente como nesta escrita ionic-angular 3.2.0.

Ele estava funcionando muito bem com a versão 2.xx, mas agora eu verifiquei a versão 3.xx
há algo errado. não esconde o que você quer na tela até
digitando no teclado .Infelizmente encontramos outra solução ou rebaixada
sua versão iônica para qualquer 2.xx

12 de maio de 2017 ÖÖ 3:32 tarihinde "vazad28" [email protected] yazdı:

Isso é realmente cuidado. Eu ainda vejo a barra de guias. Em execução mais recente
versão como neste escrito ionic-angular 3.2.0.

—
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/driftyco/ionic/issues/7047#issuecomment-300952251 ,
ou silenciar o thread
https://github.com/notifications/unsubscribe-auth/AVskkNkEdzsMkkrhGW0l9OUW2BKly-PSks5r46ingaJpZM4I-H1S
.

Apenas um pensamento aqui. Ocultar as guias usando qualquer um dos hacks acima faz com que a visualização seja atualizada nos dispositivos, então que tal diminuirmos a altura da zona da guia para zero em vez de ocultar? Apenas um pensamento, mas estou muito envolvido agora para experimentá-lo.

+1 para uma correção oficial! As abordagens " display:none " causam cintilação inaceitável, e as guias renderizam uma vez e desaparecem ... parece nojenta e hacky. (alguém tem alguma idéia de como se livrar do flicker? Eu não estou acima de um hack se parecer bom para o usuário)

Alguma novidade em relação a este assunto? ainda esperando por uma correção oficial antes de perder a esperança e começar a implementar algo que afetaria a qualidade da interface do usuário

@patrickmcd , The Lord of The Thumbs Down, apenas querendo saber se você tentou parar com esse hábito?

@ viking2917 você pode tentar o hack que sugeri e tentar forçar a altura das guias a zero. Isso pode funcionar. Eu não tentei ainda embora.

Infelizmente, ocultar as guias com CSS causará vários problemas. O Ionic calcula alguns valores como margem em ion-content e leva em consideração a presença das guias (que estão ocultas).

Tivemos que remover a solução porque ocorreram alguns problemas de posicionamento com outros componentes.

@Khalid-Nowaf Eu simplesmente não gosto de comentários de spam que tiram o tempo da equipe Ionic e dos ~ 2.000 observadores deste repositório.

O comentário de @Floyd1256 é um spam imprudente. Não acrescenta nada à conversa. É apenas mais um comentário "mais um / já chegamos" que serve apenas para encher nossas caixas de entrada.

Meus votos negativos são tentativas de levar os outros a um comportamento mais atencioso. Antes de comentar, devemos lembrar que estamos conversando com ~2000 pessoas _cujo tempo é precioso_ . Não devemos tratar este espaço tão levianamente como trataríamos um bate-papo pessoal com amigos. Devemos nos perguntar se nosso comentário ajudará ou atrapalhará os outros, se avança a conversa ou é apenas ruído, se é realmente necessário dizer ou poderia ser melhor expresso com uma reação do Github e se acelerará ou retardará o desenvolvimento.

Parece haver um ramo abordando esse problema junto com alguns outros https://github.com/ionic-team/ionic/tree/keyboard-fixes
Este commit em particular parece muito promissor

Eu não tenho coragem de ir mais de ionic v1.

Faço esse patch (coloquei um controller da view afetada, pois só tenho um com esse combo).

/* HACK Al mostrar o 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();});/ HACK*/

isso funciona

No meu caso isso só acontece quando estou usando android, a melhor solução é alterar uma propriedade na tag android no config.xml

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

Basta adicionar as seguintes linhas, para que a compilação do Android no AndroidManifest.xml tenha o ajustePan em android:windowSoftInputMode , isso fará com que o teclado sobreponha todo o conteúdo em vez de empurrar a tela para cima.

Para a abordagem do @Jatapiaro explicada acima, instalei o seguinte plug-in cordova:

cordova plugin add cordova-custom-config

Então acabei de adicionar o seguinte ao meu config.xml

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

Trabalhando no Android e iOS

Aqui está o que eu fiz para ocultar o teclado dinamicamente:

no meu arquivo 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;
      });
    });
  }

então, no meu arquivo HTML, faço uma variável de modelo chamada #footer, que é o que estou referenciando no TS acima assim:

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

Espero que funcione para você também :-) @RaymondAtivie

Eu dei dessa forma no Ionic V3. Funciona perfeitamente bem.
arquivo TS
ionViewDidEnter() {
if (this.keyboard.isOpen())
this.showTabs = false;
senão
this.showTabs = true;
}

arquivo HTML

dasda

asd

não é verdade resposta

Existe alguma atualização na solução oficial para isso?

A partir de hoje .. com Ionic v
Não consegui fazer o @ionic-native/keyboard funcionar. Como muitos outros afirmaram... o evento onKeyboardShow() nunca é acionado.
também cordova-keyboard-plugin foi preterido.

Então o que funcionou para mim foi...
cordova plugin add cordova-plugin-ionic-keyboard --save
poste isso .. Eu adicionei window.addEventListener conforme descrito em seu readme

não se esqueça de remover o eventlistener caso você saia da aba e volte para ela novamente.

```` datilografado
// MinhasTabs.ts
showOuvinte() {
console.log('teclado visível');
document.body.classList.add('keyboard-is-open');
}
hideListener() {
console.log('teclado oculto');
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);
}
````

No início, trabalhou para mim. Quando clico pela primeira vez em uma entrada quando o teclado é mostrado, a barra de guias estava oculta. Depois de clicar em outra entrada, a barra de guias foi exibida novamente. Portanto, no meu caso, a barra de guias só foi ocultada quando clico no campo de entrada primeiro.

Alguma sugestão? @dharapvj

Olá a todos, embora não seja o mesmo que "esconder" a barra de guias, essa solução funcionou bem para mim, permitindo que o teclado obscurecesse a barra de guias em vez de empurrá-la para cima.

Em seu config.xml principal, edite a plataforma Android para incluir o seguinte:

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

O que isso faz é modificar o valor padrão que o Cordova grava em seu AndroidManifest.xml para controlar o comportamento global de entrada do teclado para seu aplicativo.

...e se você verificar AndroidManifest.xml em sua próxima compilação, verá que o padrão de android:windowSoftInputMode= "adjustResize" foi alterado para "adjustPan", permitindo assim que a barra de guias seja obscurecida.

@codymbeardsley Muito obrigado! Esta solução funciona para mim; pelo menos para android é uma boa solução. Quando o teclado está aberto, em vez de pressionar a barra de ferramentas , o teclado apenas oculta o rodapé !

Funciona Perfeito!
Obrigado @codymbeardsley

Obrigado pelo problema! Este problema está sendo bloqueado para evitar comentários que não sejam relevantes para o problema original. Se isso ainda for um problema com a versão mais recente do Ionic, crie um novo problema e verifique se o modelo está totalmente preenchido.