Ionic-framework: Ocultar pestañas automáticamente cuando el teclado está abierto

Sí, supongo que estás bajo Android. El viejo problema del teclado...

¡Vi una charla en PhoneGap conf de @tlancina sobre el teclado y parece ser un tema bastante difícil en general!
Puedo confirmar que la barra de pestañas inferior también se empuja hacia arriba al abrir el teclado en mi aplicación en Android. Pero mucho peor es cubrir los campos de entrada que están cerca de la parte inferior. Tim dijo que uno debería tratar de evitar eso, pero desafortunadamente hay largas listas para editar en mi proyecto.
He pospuesto todo el tema del teclado para esperar y ver cómo se desarrolla en ionic.

Además, @tlancina , ¿hay un tutorial de mejores prácticas sobre el uso del teclado en ionic (integración del complemento de teclado iónico, init/setting event handlers)?

Estoy experimentando este problema también.

Estamos teniendo el mismo problema en nuestro proyecto también. ¿Algún plan al respecto?

Hola chicos, también siento el dolor, ¿alguna noticia por casualidad?

También necesita esta gran función, pestañas y puede ser incluso un encabezado agradable para poder ocultar.

@ jgw96 Noté que agregaste la etiqueta de mejora en esto. Dado que las aplicaciones nativas no se comportan igual (mover pestañas sobre el teclado) y las pestañas también limitan el contenido real a solo un par de líneas, especialmente en teléfonos más pequeños, ¿no debería considerarse un problema más serio?

Para las personas que buscan una solución temporal, esto es lo que hice:

Constructor de 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 del CSS:

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

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

Esto no funcionará si tiene varias pestañas en una página, pero supongo que puede seleccionarlas directamente con su CSS.

Actualmente estoy ejecutando Ionic beta 11

¿Algún avance en esto?

@bvx89 Gracias.
Por el bien de aquellos en Rc0 hay un ligero cambio en el css

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

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

Aún no hay una solución oficial

Solo para mencionar que habilitar el modo de pantalla completa en Android también soluciona este problema para mí.
Esto se puede hacer configurando
<preference name="Fullscreen" value="true" />
en config.xml y, opcionalmente, agregar cordova-plugin-fullscreen si está utilizando una plataforma cordova android anterior a v5.0.0.

¿Se solucionará esto en la próxima versión junto con el resto de los problemas del teclado que se solucionarán (lea algo que indique eso sobre los problemas del teclado en otro hilo) o se ha quedado en el olvido?

@RaymondAtivie
Tengo el mismo problema, ¿se solucionará en la próxima versión?

No me funciona en RC3.
onKeyboardShow() nunca se activa...

+1, tengo el mismo problema.

Cordova CLI: 6.3.1
Versión CLI iónica: 2.1.8
Versión de librería de la aplicación iónica: 2.1.4
versión de ios-deploy: no instalada
versión de ios-sim: no instalada
Sistema operativo: Windows 8.1
Versión del nodo: v6.4.0
Versión de Xcode: No instalado

Tengo el mismo problema y la solución publicada por @RaymondAtivie no funciona del todo bien. las pestañas ya no son visibles, pero parece haber un borde superior aún visible. ¿Alguien más tiene este problema? He intentado agregar
box-shadow: none; border-top: none;
y aún termina con el mismo borde superior visible desde la barra de pestañas. ¿Algunas ideas?

Resolví este problema cambiando la opción fullscreen="true" ion-content fullscreen="true"
y establecer un estilo

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

Intenté esto y todavía se muestra el mismo borde superior a pesar de que la barra de pestañas está configurada para mostrar falso.

@payneBrandon Estoy escondiendo la barra superior
<ion-header *ngIf="isShowHeader()">

Mi pestaña de iones está en la parte inferior, por lo que ocultar el encabezado no lo afecta mucho. Adjunto una captura de pantalla de lo que estoy hablando. Se muestra el teclado, las pestañas en la parte inferior están ocultas, pero aún parece que hay una línea de borde superior que permanece en su lugar si me desplazo.

esta barra parece una parte del formulario
¿Puedes compartir tu código html?

Finalmente lo descubrí. No tenía que preocuparme por un encabezado ya que mis pestañas están en la parte inferior, PERO necesitaba mirar el pie de página (¡duh!). Apliqué una clase condicional al pie de página para ocultarlo si el cuerpo tiene la clase keyboard-is-open y BAM, de vuelta en el negocio. ¡Gracias por la ayuda!

@payneBrandon buena suerte

Me gustaría ver esa característica también.
También creo que ion-footer debería admitir la visibilidad en el teclado abierto/cerrado

He hecho una solución simple (por supuesto, no ideal). El .scroll-content tiene un margin-bottom de 56px , la misma altura que tienen las pestañas. Compruebo el teclado:

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

y luego adjunte esta clase a ion-content , un padre de .scroll-content :

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

y agregue esto a ion-content :

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

También escondí las pestañas cuando el teclado está abierto usando el mismo método en tabs.html :

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

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

Hice esto solo para la página que necesitaba la solución.

Funciona tanto en iOS como en Android.

RESUELTO

esta es una solución adecuada, excepto css marcada.

```
importar {Componente} desde '@angular/core';
importar {Teclado} desde 'ionic-native'
importar {Página de inicio} desde '../home/home';
import { AboutPage } from '../about/about';
importar {Página de contacto} desde '../contacto/contacto';

@Componente({
templateUrl: 'tabs.html'
})
exportar clase TabsPage {
// esto le dice al componente de pestañas qué páginas
// debe ser la página raíz de cada pestaña
tab1Root: cualquiera = página de inicio;
tab2Root: cualquiera = AboutPage;
tab3Root: cualquiera = PáginaContacto;
valorforngif=verdadero;

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

agradable @ efnan34 , aunque no debería necesitar proporcionarlo en el constructor.

Esto hace que mi teclado se cierre automáticamente al abrirlo... ¿Se debe a que el enfoque vuelve a las pestañas para ocultarlas, lo que a su vez hace que el teclado se cierre?

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

@ bvx89 Su solución es la única que pude trabajar con Ionic 2.1.0. Hay un error registrado para ionic-native y los cambios no se detectan, por lo que las otras soluciones no funcionaron para mí. Esperando una solución oficial para esto

Tengo el mismo problema @Killmore
¿Todavía no hay ninguna solución oficial para esto?

Hola
La solución anterior también se ejecuta en Ionic 2.1.0, pero se puede usar un mejor resultado [oculto] attrb en lugar de * ngif. Estoy usando esta solución en mi proyecto, funciona bien

Que tenga un lindo día

Lo anterior provocará un parpadeo en algunos dispositivos Android y realmente es una mala opción.

Esto funcionará... prueba esto

var originalHeight = documento.documentElement.clientHeight;
var originalWidth = document.documentElement.clientWidth;
$(ventana).cambiar tamaño(función() {
// Controla el cambio de modo horizontal/vertical
if (document.documentElement.clientHeight == originalWidth &&
document.documentElement.clientWidth == originalHeight) {
originalHeight = documento.documentElement.clientHeight;
ancho original = documento.documentElement.clientWidth;
}
// Comprueba si la altura disponible es menor (se muestra el teclado) para ocultar el pie de página.
if (document.documentElement.clientHeight <originalHeight) {
$('.pie de página').hide();
} demás {
$('.pie de página').show();
}
});

Así es como resolví este 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'));
  }
}

creditos a dpary

Realmente espero que todos estén haciendo pruebas de dispositivos adecuadas porque todas estas soluciones que ocultan pestañas hacen que la vista se vuelva a renderizar en los dispositivos, lo que provocará un parpadeo muy visible y, en algunos casos, fallas. De todos modos, todo lo mejor.

Sí, estoy con @cozzbie, todo esto son solo algunos trucos. Necesitamos una solución oficial real por parte del equipo @ionitron @manucorporat

+1 Necesitamos una solución oficial, ninguna de estas correcciones es ideal para uso en producción.

La versión actual de ionic lo hace solo

21 de noviembre de 2017 17:12 tarihinde "Ruben Callewaert" [email protected]
yazdí:

+1 Necesitamos una solución oficial, ninguna de estas soluciones es ideal para
uso de producción.

—
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/driftyco/ionic/issues/7047#issuecomment-296201358 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/AVskkCpgFZZRbrd56ILc5nIPZICRTclUks5ryLlCgaJpZM4I-H1S
.

¿Está esto realmente cuidado? Todavía veo la barra de pestañas. Ejecutando la última versión como en este escrito ionic-angular 3.2.0.

Estaba funcionando muy bien con la versión 2.xx pero ahora revisé la versión 3.xx
hay algo mal. No oculta lo que quieres en la pantalla hasta que
escribiendo en el teclado. Desafortunadamente, hemos encontrado otra solución o degradado
tu versión iónica a cualquier 2.xx

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

¿Está esto realmente cuidado? Todavía veo la barra de pestañas. Ejecutando lo último
versión como en este escrito ionic-angular 3.2.0.

—
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/driftyco/ionic/issues/7047#issuecomment-300952251 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/AVskkNkEdzsMkkrhGW0l9OUW2BKly-PSks5r46ingaJpZM4I-H1S
.

Sólo un pensamiento aquí. Ocultar las pestañas usando cualquiera de los trucos anteriores hace que la vista se actualice en los dispositivos, entonces, ¿qué tal si bajamos la altura de la zona de pestañas a cero en lugar de ocultarla? Solo un pensamiento, pero estoy demasiado involucrado en este momento para probarlo.

¡+1 para una solución oficial! Los enfoques de " display:none " causan un parpadeo inaceptable, y las pestañas se representan una vez y luego desaparecen... se ven asquerosos y extraños. (¿Alguien tiene alguna idea de cómo deshacerse del parpadeo? No estoy por encima de un truco si le parece bien al usuario)

¿Algo nuevo con respecto a este tema? sigo esperando una solución oficial antes de perder la esperanza y comenzar a implementar algo que afectaría la calidad de la interfaz de usuario

@patrickmcd , El señor de los pulgares hacia abajo, solo me preguntaba, ¿has tratado de dejar este hábito?

@ viking2917 podría probar el truco que sugerí e intentar forzar la altura de las pestañas a cero. Aquello podría funcionar. Aunque aún no lo he probado.

Desafortunadamente, ocultar las pestañas con CSS causará una serie de problemas. Ionic calcula algunos valores como el margen en ion-content y tiene en cuenta la presencia de las pestañas (que están ocultas).

Tuvimos que eliminar la solución porque ocurrieron algunos problemas de posicionamiento con otros componentes.

@ Khalid-Nowaf Simplemente no aprecio los comentarios de spam que le quitan tiempo al equipo de Ionic y a los ~2000 observadores de este repositorio.

El comentario de @ Floyd1256 es spam desconsiderado. No agrega nada a la conversación. Es solo otro comentario de "más uno / ya llegamos" que solo sirve para llenar nuestras bandejas de entrada.

Mis votos negativos son intentos de empujar a otros hacia un comportamiento más considerado. Antes de comentar, debemos recordar que estamos teniendo una conversación con ~2000 personas _cuyo tiempo es precioso_ . No deberíamos tratar este espacio con tanta ligereza como lo haríamos con un chat de mensajería instantánea personal con amigos. Deberíamos preguntarnos si nuestro comentario ayudará o entorpecerá a otros, si hace avanzar la conversación o es solo ruido, si es realmente necesario decirlo o si podría expresarse mejor con una reacción de Github , y si acelerará o ralentizará el desarrollo.

Parece que hay una rama que aborda este problema junto con algunos otros https://github.com/ionic-team/ionic/tree/keyboard-fixes
Este compromiso en particular parece muy prometedor.

No tengo coraje para ir más allá de ionic v1.

Hago este parche (puse el controlador de vista afectado, ya que solo tengo uno con este combo).

/* HACK Al mostrar el teclado el tabbar se pone encima de él en android /var fondo_almacenado=0;ventana.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');$alcance.$aplicar();});ventana.addEventListener('native.keyboardhide', función (e) {angular.element(document.getElementsByClassName('tab-nav')).removeClass('hide');angular.element(document.getElementsByClassName('has-tabs')).css('bottom',bottom_stored);$alcance.$aplicar();});/ HACKEAR */

esto funciona

En mi caso, esto solo sucede cuando estoy usando Android, la mejor solución es cambiar una propiedad en la etiqueta de Android en config.xml

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

Simplemente agregue las siguientes líneas, de modo que la compilación de Android en AndroidManifest.xml tenga el ajustePan en android:windowSoftInputMode , esto hará que el teclado superponga todo el contenido en lugar de empujar la pantalla hacia arriba.

Para el enfoque de @Jatapiaro explicado anteriormente, he instalado el siguiente complemento cordova:

cordova plugin add cordova-custom-config

Luego acabo de agregar lo siguiente a mi config.xml

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

Trabajando en Android e iOS

Esto es lo que hice para ocultar el teclado dinámicamente:

en mi archivo 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;
      });
    });
  }

luego, en mi archivo HTML, creo una variable de plantilla llamada #footer, que es a lo que me refiero en el TS anterior de esta manera:

<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 te funcione a ti también :-) @RaymondAtivie

Lo di de esta manera en Ionic V3. Funciona perfectamente bien.
archivo TS
ionViewDidEnter() {
si (este.teclado.estáabierto())
esto.showTabs = false;
demás
esto.showTabs = verdadero;
}

archivo HTML

dasda

asd

respuesta no verdadera

¿Hay alguna actualización sobre la solución oficial para esto?

A partir de hoy.. con Ionic v
No pude hacer funcionar @ionic-native/keyboard. Como muchos otros dijeron ... el evento onKeyboardShow () nunca se activa.
también cordova-keyboard-plugin ha quedado obsoleto.

Así que lo que funcionó para mí fue...
cordova plugin add cordova-plugin-ionic-keyboard --save
publique esto ... Agregué window.addEventListener como se describe en su archivo Léame

no olvide eliminar el eventlistener en caso de que abandone la página de pestañas y vuelva a ella.

````mecanografiado
// MisTablas.ts
mostrarOyente() {
console.log('teclado visible');
document.body.classList.add('el teclado está abierto');
}
ocultarOyente() {
console.log('teclado escondido');
document.body.classList.remove('el teclado está abierto');
}

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

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

Al principio funcionó para mí. Cuando hago clic por primera vez en una entrada cuando se muestra el teclado, la barra de pestañas estaba oculta. Después de hacer clic en otra entrada, la barra de pestañas se mostró nuevamente. Entonces, en mi caso, la barra de pestañas solo se ocultó cuando hago clic en el campo de entrada al principio.

¿Cualquier sugerencia? @dharapvj

Hola a todos, si bien no es lo mismo que "ocultar" la barra de pestañas, esta solución funcionó bien para mí al permitir que el teclado oculte la barra de pestañas en lugar de empujarla hacia arriba.

En su config.xml principal, edite la plataforma Android para incluir lo siguiente:

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

Lo que esto hace es modificar el valor predeterminado que Cordova escribe en su AndroidManifest.xml para controlar el comportamiento de entrada de teclado global para su aplicación.

... y si revisa AndroidManifest.xml en su próxima compilación, verá que el valor predeterminado de android:windowSoftInputMode= "adjustResize" se cambia a "adjustPan", lo que permite ocultar la barra de pestañas.

@codymbeardsley ¡ Muchas gracias! Esta solución funciona para mí; al menos para android es una buena solución. Cuando el teclado está abierto, en lugar de presionar la barra de herramientas , ¡el teclado simplemente oculta el pie de página !

¡Funciona perfecto!
Gracias @codymbeardsley

¡Gracias por el problema! Este problema se está bloqueando para evitar comentarios que no son relevantes para el problema original. Si esto sigue siendo un problema con la última versión de Ionic, cree un nuevo problema y asegúrese de que la plantilla esté completa.