Ionic-framework: problema (formularios): entrada, desplazamiento, problemas de teclado para formularios

Creado en 19 abr. 2016  ·  109Comentarios  ·  Fuente: ionic-team/ionic-framework

En este momento, la forma en que Ionic maneja la entrada de formularios puede ser mejor. Ionic 1 tenía valores predeterminados impresionantes para las entradas de formularios con respecto al manejo del teclado, desplazamiento de contenido, etc. Ionic 2 debe ser consistente y, lo que es más importante, funcionar correctamente para las entradas de formularios de manera consistente en todas las plataformas (iOS, Android, Windows).

Consulte este repositorio para ver el ejemplo de código que debe ejecutarse en los dispositivos: https://github.com/dylanvdmerwe/ionic2-formtest

Androide:

  • [x] 1. Al seleccionar una entrada, todo el contenido del formulario debe desplazarse para que el elemento seleccionado sea visible después de que se muestre el teclado.
  • [x] 2. Cuando el teclado esté oculto, vuelva a colocar el desplazamiento en su posición original y elimine el relleno añadido.
  • [x] 3. Al tocar un área que no es una entrada, se cierra el teclado.
  • [] 4. Si el usuario selecciona una segunda entrada después de completar la primera, la pantalla debe desplazarse para enfocarse en el campo de entrada recién seleccionado.
  • [x] 5. Algunos teclados tienen un botón siguiente, anterior y hecho.
  • [x] 6. Soporte para autocorrección, autocompletar y autocapitalizar y combinaciones de los mismos.

    iOS:

  • [x] 1. Al seleccionar una entrada, todo el contenido del formulario debe desplazarse para que el elemento seleccionado sea visible después de que se muestre el teclado.

  • [x] 2. Cuando el teclado esté oculto, vuelva a colocar el desplazamiento en su posición original y elimine el relleno añadido.
  • [x] 3. Al tocar un área que no es una entrada, se cierra el teclado.
  • [x] 4. Si el usuario selecciona una segunda entrada después de completar la primera, la pantalla debe desplazarse para enfocarse en el campo de entrada recién seleccionado.
  • [] 5. Algunos teclados tienen un botón siguiente, anterior y hecho. Estos deben estar conectados a las entradas del formulario en la página para permitir que el usuario recorra las opciones de entrada.
  • [x] 6. Soporte para autocorrección, autocompletar y autocapitalizar y combinaciones de los mismos.

_Tenga en cuenta que este problema no tiene nada que ver con formularios o entradas en un componente de diapositivas . Esa sería una verificación de consistencia separada para realizar.

¿Qué versión iónica? 2.x

Ejecute ionic info desde el indicador de terminal / cmd: (pegue la salida a continuación)
CLI de Córdoba: 6.1.1
Versión del marco iónico: 2.0.0-beta.4-201604170622
Versión Ionic CLI: 2.0.0-beta.24
Versión de Ionic App Lib: 2.0.0-beta.14
SO:
Versión de nodo: v5.7.0

v3

Comentario más útil

Estimado equipo iónico ( @manucorporat , @brandyscarney , @adamdbradley )
Sé que está trabajando duro en la próxima versión, pero estos problemas con el teclado son muy importantes para la experiencia de la aplicación. Considere darles una prioridad alta, junto con otros problemas de larga data como el desplazamiento virtual.
El tamaño enorme de la aplicación y el inicio lento apestan, está bien, pero cuando la aplicación está instalada y ejecutándose, debería brindar una experiencia adecuada en las cosas básicas como el manejo del teclado.

Todos 109 comentarios

@dylanvdmerwe ¡ Esto es genial, gracias por armar esto! En cuanto al uso de los botones siguiente y anterior para subir y bajar las entradas, esto debería estar funcionando, pero tal vez algo se rompió recientemente.

También se aplica al autocompletar y a la corrección automática, por defecto están deshabilitados a menos que se agreguen específicamente al elemento: https://github.com/driftyco/ionic/blob/2.0/ionic/components/input/input-base.ts # L217

¿Crees que las mayúsculas automáticas también deberían estar deshabilitadas de forma predeterminada?

@adamdbradley

  • No puedo hacer que los botones del teclado en iOS cambien entre las distintas entradas. Se "confunden" y el teclado finalmente se cierra. Todavía necesito probar en Android cuando pruebo con otros teclados que tienen estos botones.
  • No estoy seguro de qué es lo mejor para los valores predeterminados de autocompletar y autocorrección. En iOS, para ciertos tipos de teclado, están habilitados de forma predeterminada , pero creo que es mejor seguir las reglas estándar <input> .
  • Probaré algunas permutaciones para autocompletar y usar mayúsculas automáticamente un poco más tarde. Tenga en cuenta que registré esto por separado aquí cuando cambió el complemento de teclado.

Tenga en cuenta que los estoy probando en dispositivos reales.

@adamdbradley He actualizado los elementos anteriores. Las cosas pendientes son problemas reproducibles definitivos.

¿Dónde estamos en el número 1 de Android? Está arruinando totalmente mi aplicación sin él.

+1 en el problema de Android n. ° 1 :)

¿Algún movimiento en los elementos enumerados en este número?

@dylanvdmerwe, una vez que se

+1 en el problema de Android n. ° 1 :)

+1 en problema de Android:

. Al seleccionar una entrada, se debe desplazar todo el contenido del formulario para que el elemento seleccionado sea visible después de que se muestre el teclado.

Esto me impide trasladar completamente de ionic1 a ionic 2.
¡Todo lo mejor!

Esto me impide trasladar completamente de ionic1 a ionic 2.

Aquí igual.

+1 en el número 1 de Android
¡Solucione esto lo antes posible! Comenzamos una nueva aplicación en esto, ¡pero no queremos que este error sea un factor decisivo y nos haga volver a ionic 1!

@adamdbradley , @ jgw96 ¿Hay alguna solución por ahora?

¿Puedes darnos una actualización? Difícil de demostrar con esta funcionalidad principal que no funciona ...
¡Gracias!

También agradecería una actualización sobre esto. Nuestros elementos ion-input no se desplazan a la vista al enfocarlos. Intentamos cambiar a elementos input normales, pero eso causa todo tipo de problemas. ¡Gracias!

¡Hola a todos! Les puedo asegurar que estamos trabajando arduamente en temas como este. ¿Están todos viendo este problema principalmente en ios o android? ¿O sucede en ambos?

Ocurre en Android, no estoy seguro de iOS. En este momento, solo una vez que empiezo a escribir, la interfaz de usuario se desplaza hacia arriba para mostrar la entrada. Idealmente, debería suceder tan pronto como se enfoca y aparece el teclado.

Hola,

Veo varios problemas más en iOS en el dispositivo (no he comprobado en Android):

  • Con etiquetas flotantes, al hacer clic en una entrada, a menudo muestra temporalmente una línea vacía antes del valor, lo que hace que el valor salte hacia abajo y la entrada se expanda verticalmente. Con las etiquetas normales, el valor a veces se desplaza temporalmente horizontalmente.
  • Con etiquetas flotantes, el símbolo de intercalación salta fuera de la entrada cuando se desplaza.
  • Cuando se usa el complemento de teclado cordova y se usa la barra de accesorios para navegar entre los campos, la vista completa a veces salta. Después de configurar disableScroll (verdadero), el siguiente botón funciona bien, pero el botón Atrás aún hace que la pantalla salte. ¿No estás seguro de si esto debería informarse allí en su lugar?

Gracias por el buen trabajo en Ionic, ¡estoy deseando que nos arreglen los problemas de las últimas!

El mismo problema con el teclado y la entrada de iones en Android. ¡Problema muy importante en todas las aplicaciones con formularios!

¿No hay actualizaciones sobre este problema crítico?

alguna actualización sobre este tema?

Me encantaría que esto se vea en un próximo RC.

Actualización sobre esto. # 5 para iOS no puedo reproducir. Eso me está funcionando bien en el maestro, ¿alguien puede confirmarlo?

Mirando el n. ° 1 ahora.

Estoy enfrentando el mismo problema. ¿Hay actualizaciones en el mismo? .

En iOS # 1 no funciona muy bien en pantallas grandes (iPad). La entrada se desplaza hasta la parte superior, mientras que sería bueno tenerla más cerca del teclado.

Hola,

Me tomó un tiempo investigar el problema, ya que ocurrió en varios dispositivos de nuestro lado.

Androide:

  • Se ve bien al habilitar scrollAssist
  • Todavía hay algún error al cambiar de una entrada de iones a otra cuando el teclado ya está abierto (desplazamiento de página hacia arriba).

iOS:

  • La primera vez, la página no se desplaza
  • La segunda vez, en cualquier entrada de la página, la página se desplaza hacia arriba con precisión
  • Igual que para Android, al cambiar de campo, la página se desplaza demasiado.

Después de algunas búsquedas, descubrimos que scroolView.scrollTo usa la propiedad HTML scrollTop.
Esta propiedad está limitada por el valor teórico: scrollHeight - clientHeight.

Acabamos de agregar las siguientes líneas en scroll-view.js (node_modules / ionic-angular / util /):
console.log (fromY + '=>' + y);
console.log ('valor teórico máximo:' + (this._el.scrollHeight - this._el.clientHeight));
Y el problema parece obvio.

Por algunas razones, cuando enfocas el campo en Android, el teclado se genera antes de desplazarse hacia arriba, por lo que el valor teórico máximo es superior al valor que queremos desplazar hacia arriba. En iOS, por primera vez, no es el caso. Entonces, el valor máximo de desplazamiento hacia arriba es uno.

Tu turno ;)

@EDumdum ¿Cómo puedo replicar este problema? Cuando tengo el foco en una entrada, y el teclado ya está activo, y cambio a la siguiente entrada, la siguiente entrada se desplaza debajo del encabezado. ¿No hace eso por ti?

Todavía hay algún error al cambiar de una entrada de iones a otra cuando el teclado ya está abierto (desplazamiento de página hacia arriba).

Hola @adamdbradley

Paso para crear un ejemplo a continuación. Las capturas de pantalla son del emulador, pero reproducimos el mismo comportamiento en los dispositivos. El formulario está aquí para agregar algo de color (azul = campo enfocado, rojo = otro campo).

Paso para reproducir

Paso para crear un ejemplo

  • Creó un nuevo proyecto (inicio iónico -v2 myApp) => RC2
  • Agregado scrollAssist en el constructor de mi aplicación
    constructor(config: Config, platform: Platform) { config.set('scrollAssist', true); ... }
  • Modifiqué mi home.html & home.ts y un pequeño agregado a .scss

<ion-header> <ion-navbar> <ion-title>Home</ion-title> </ion-navbar> </ion-header> <ion-content padding> <div class='takePlace'>Bla bla</div> <form novalidate [formGroup]="form"> <ion-item> <ion-input type="tel" pattern="[0-9]{3}" formControlName="dummyField"></ion-input> </ion-item> <ion-item> <ion-input formControlName="dummyField2"></ion-input> </ion-item> </form> </ion-content>

import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { public form: FormGroup; constructor(private formBuilder: FormBuilder) { this.form = this.formBuilder.group({ dummyField: ['', [Validators.required, Validators.pattern('[0-9]{3}')]], dummyField2: ['', [Validators.required, Validators.pattern('[0-9]{3}')]] }); } ngOnInit() { } }

.takePlace { height: 300px; border: 1px solid red; }

Los movimientos de compilación nocturnos ingresan los campos correctamente, pero en algunos lugares, cuando presiona el botón Atrás y el teclado se desliza hacia abajo, las entradas permanecen donde están (se deslizan hacia arriba), deberían haber llegado al lugar original.
En segundo lugar, no puedo escribir en el emulador, ya que me obliga a escribir en el teclado en pantalla y emu no lo muestra.

@kodeine
image

¡Genial, gracias por la retroalimentacion! Usaré todas estas notas para varios escenarios de prueba. Intentaré salir pronto por la noche para que todos puedan probarlo, ¡gracias!

@adamdbradley
En otro escenario, estaba en una página donde tenía entrada y el teclado estaba abierto, hice clic en el botón Atrás y noté que las pestañas también estaban en la parte superior del teclado. así que tal vez necesitemos mantener las pestañas detrás del teclado.

¡Funciona mejor de noche!

Sin embargo, encontré un error introducido por los cambios recientes. Si la entrada A tiene el foco y toca la entrada B, el teclado se oculta y ninguna de las entradas tendrá el foco.

Además, al enfocar una entrada, "salta" a su posición, en lugar de una animación de desplazamiento suave como cuando enfoca una entrada en Safari, por ejemplo, ¿es eso lo que se pretendía?

EDITAR: Esto está usando WKWebView. No he probado UIWebView.

Estoy realmente interesado en saber si habrá soporte para el botón "siguiente" para las entradas.
Es bastante difícil para el usuario (android, no estoy seguro para ios) no presionar el botón enviar / aceptar pensando que iría a la siguiente entrada en lugar de terminar la acción del formulario.

@biesbjerg ¿Puede describir más cómo recrear esos problemas? Cuando dices que salta a su posición, ¿el encabezado se desplaza hacia afuera? ¿Qué tipo de entrada? ¿Está la entrada en la parte superior de la aplicación o cerca de la parte inferior? ¿Puede proporcionar un video del problema? Gracias

@adamdbradley este video muestra el "salto a la posición en lugar de un desplazamiento suave" y también muestra un error que noté, que si se enfoca en una entrada y presiona el botón de hardware Atrás, no se desplaza el contenido hacia atrás.
editar: tamaño gif cambiado.

ezgif com-cb02e8c895

@adamdbradley Este es el problema del enfoque de entrada, donde el teclado desaparece en lugar de enfocar la entrada pulsada.

focus-keyboard

Y esto es en Android, donde al enfocarme, mi formulario da un salto repentino y la primera entrada enfocada no es visible en la pantalla:

keyboard-jump

¡Hola @biesbjerg ! Hemos lanzado otro evento nocturno muy recientemente que incluyó algunas correcciones más para el desplazamiento de entrada, ¿te importaría intentarlo? ¡Gracias!

@ jgw96 ¡Hola! Probé 2.0.0-rc.3-201611302233 y nada cambió, por lo que las grabaciones gif siguen siendo problemas válidos.

¡Gracias por probar @biesbjerg ! ¿Podría publicar un repositorio o crear un plunkr que pueda usar para reproducir este problema?

@ jgw96 ¡ Aquí tienes! https://github.com/biesbjerg/6228-ionic-keyboard-issues

Pasos:

  1. git clone https://github.com/biesbjerg/6228-ionic-keyboard-issues.git
  2. cd 6228-ionic-keyboard-issues
  3. npm install
  4. mkdir www (Necesario debido a un error cordova / iónico donde www debe existir o la instalación del complemento fallará)
  5. ionic state reset
  6. Ejecutar en dispositivos

El problema que se muestra en el video de iOS es un problema con UIWebView y WKWebView.

El problema de Android tiene algo que ver con que mi contenido esté centrado verticalmente usando flexbox, pero debería comportarse normalmente incluso así.

¡Hola @biesbjerg ! Gracias por el repositorio. Hoy se están produciendo algunos cambios más con scroll que pueden solucionar este problema, actualizaré esta publicación con mis hallazgos después de la prueba.

¡Hola @ jgw96! ¡Frio! :-)

Touching an area that is not an input dismisses the keyboard.

Veo que esta parte (bueno, y otras partes) tiene una marca al lado; ¿Significa esto que estará en la próxima versión? ¡Esto sería genial para las aplicaciones de chat que tienen un botón Enviar en un <ion-footer> en la parte superior del teclado! Entonces el teclado no siempre se cerraría después de hacer clic en el botón Enviar

Hola a todos. También tengo el mismo problema. Y observo algo.
Cuando no se seleccionan las entradas tenemos este caso.

1jpg

Pero cuando lo seleccionamos, tenemos este

2

Como resultado, di ese mal paso con! Important

3

Y me funciona como una solución temporal.

Así que ... las cosas se ponen realmente complicadas cuando tienes algo que usa posición: relativa.

En este ejemplo, el logo es el elemento con posición relativa, y si presionas en la primera entrada se pone así:
outro

Pero al presionar la segunda entrada también se empuja el logo:
photo569187513406696003

@ jgw96 ¿ alguna noticia sobre este tema y sobre el RC.4?

Yo también espero tener noticias sobre este tema, mi cliente está ejerciendo mucha presión 🙉

La buena noticia es que las entradas se comportan mucho mejor en las últimas noches. Creo que muchas personas, incluyéndome a mí como el registrador original de este problema, estarán felices con las correcciones.

@yannbf , para ser justos, Ionic 2 sigue siendo un software de presentación.

Lo entiendo y lo encuentro realmente razonable. Solo esperaba tener una actualización para transmitirla. Estoy muy agradecido por lo que ha hecho el equipo iónico.

De todos modos, ¿cómo puedo probar mi aplicación actual con esa noche?

@yannbf npm install ionic-angular<strong i="6">@nightly</strong> --save
y no olvide actualizar su package.json a angular 2.2.1

¡Funciona mucho mejor con la noche! Gracias chicos

¡Hola a todos! ¡Gracias por usar Ionic! @biesbjerg y @yannbf , ¿les importaría actualizar a rc4 y probar, por favor? Esa versión tiene un montón de correcciones de desplazamiento de entrada que, con suerte, deberían solucionar los problemas de ustedes. ¡Gracias!

@ jgw96 Sí, ya lo hice. ¡Es mucho mejor! Ansioso por el lanzamiento final 😄

@ jgw96 Después de actualizar, las cosas mejoraron mucho, pero los elementos con position:absolute o position:fixed todavía se ven afectados. Pude moverme desde esa página con el logotipo. Envié una impresión antes (con otro enfoque, eliminando la posición absoluta), pero como en la página siguiente, tengo que tener "términos de acuerdo" en la parte inferior de la página, todavía estoy enfrentando el problema. :

selection_002

Aquí está el código:

<div class="agreement-text">
    <p>paragraph's content..</p>
</div>

Y CSS:

.agreement-text {
    position: fixed;
    padding: 10px;
    margin-top: 40px;
    bottom: 0;
    text-align: center;
    left: 0;
    right: 0;
    margin: 0 auto;
    a {
      color: rgb(250, 231, 124);
    }
}

En mi caso, después de actualizar a RC5, el problema de la entrada de salto en Android permanece. Acabo de comenzar un nuevo proyecto con la plantilla en blanco y copié el componente de entrada de iones de la documentación en el contenido de iones, el comportamiento a continuación.

jumping input

Como puede ver, todos los componentes saltan excepto el primero.
Para el registro, esta es la salida del comando ionic info .

CLI de Córdoba: 6.4.0
Versión del marco iónico: 2.0.0-rc.5
Versión Ionic CLI: 2.2.1
Versión Ionic App Lib: 2.2.0
Versión de scripts de la aplicación iónica: 1.0.0
ios-deploy versión: No instalado
versión ios-sim: No instalado
SO: Windows 10
Versión de nodo: v6.9.2
Versión de Xcode: no instalado

@ almr193 ese comportamiento parece correcto. La pantalla se desplaza como un teclado será visible en dispositivos móviles. El desplazamiento asegura que la entrada resaltada esté siempre visible y no cubierta por el teclado en pantalla.

@dylanvdmerwe Gracias por la respuesta rápida, el escenario que presenté parece correcto y entiendo que la pantalla se desplaza a medida que el teclado se muestra en la pantalla. Sin embargo, tengo otro escenario extraño con un ion-input dentro de un ion-list con el reordenamiento de artículos habilitado. La entrada se sale de los límites y el usuario no puede ver lo que se está escribiendo.

jumping

@ almr193 sí, este es un problema aún sin resolver, lamentablemente.
Consulte el elemento 1) y 4) de Android de la publicación inicial anterior.

+1 Aún sin resolver. Cualquier método de Keyboard en ionic-native no parece ayudar en Android

Tengo un problema con el uso de diapositivas + entradas. Muestra un comportamiento muy extraño al no realizar ningún desplazamiento.

ezgif com-resize

+1

CLI de Córdoba: 6.4.0
Versión del marco iónico: 2.0.0
Versión Ionic CLI: 2.1.18
Versión Ionic App Lib: 2.1.9
Versión de scripts de la aplicación iónica: 1.0.0
ios-deploy versión: No instalado
versión ios-sim: 5.0.13
SO: macOS Sierra
Versión de nodo: v6.9.4
Versión de Xcode: Xcode 8.2.1 Versión de compilación 8C1002

+1

Esto sigue siendo un problema con los últimos y mejores cordova e ionic.

¿Existe una solución o solución temporal?

-- Actualizado --

Cuando comienza a escribir, la entrada se desplaza a la vista, pero cuando el teclado se muestra inicialmente, la entrada queda oculta por el teclado.

-

Your system information:

Cordova CLI: 6.5.0 
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
ios-deploy version: 1.9.1 
ios-sim version: 5.0.13 
OS: OS X El Capitan
Node Version: v6.1.0
Xcode version: Xcode 8.2.1 Build version 8C1002

Pantalla inicial

image1

Pantalla después de seleccionar el elemento de entrada de dominio

image2

Estimado equipo iónico ( @manucorporat , @brandyscarney , @adamdbradley )
Sé que está trabajando duro en la próxima versión, pero estos problemas con el teclado son muy importantes para la experiencia de la aplicación. Considere darles una prioridad alta, junto con otros problemas de larga data como el desplazamiento virtual.
El tamaño enorme de la aplicación y el inicio lento apestan, está bien, pero cuando la aplicación está instalada y ejecutándose, debería brindar una experiencia adecuada en las cosas básicas como el manejo del teclado.

Tengo que intervenir aquí,

  • # 9633
  • # 9518
  • # 9514
  • N.º 8607

Estos aparentemente se han dejado pudrir, mientras que el equipo agregó características realmente agradables, como el panel dividido recientemente.

El problema es que realmente no tiene sentido agregar nuevas funciones si las principales aún están rotas de alguna manera obvia. Podría decirse que es más importante hacer bien las cosas fundamentales antes de agregar al marco.

Me encanta todo el trabajo duro, pero las prioridades parecen estar equivocadas aquí.

Chicos, la mejor manera de priorizar y arreglar las cosas es proporcionar _código reproducible_ que el equipo de Ionic pueda probar y encontrar los problemas. Las capturas de pantalla y los gifs son épicos, pero lo mejor es el código que pueden usar para ver sus problemas. # 2 centavos

Tenga en cuenta que con formularios y entradas, no use display: absolute para colocar cosas.

También estoy teniendo estos problemas. Este no es un problema trivial. ¿Cómo ha sido esto un problema durante un año sin aparentemente solución?

Tengo un problema cuando un campo de entrada está enfocado, la pantalla sube y baja cada vez que hago clic en el campo. ¿Puede alguien ayudarme por favor?
teste

Versión del marco iónico: 2.3.0
Versión Ionic CLI: 2.2.2
Versión Ionic App Lib: 2.2.1
Versión de scripts de la aplicación iónica: 1.1.4
ios-deploy versión: 1.9.1
versión ios-sim: 5.0.4
SO: macOS Sierra
Versión de nodo: v7.2.0
Versión de Xcode: Xcode 8.2.1 Versión de compilación 8C1002

@pedrodurek sería genial si proporcionas un plunker para que los chicos de ionic puedan reproducirse.

Encontré una solución temporal para el problema de los saltos de texto. Esto NO es una solución, sino esencialmente un truco hasta que se implemente una solución mejor.

Primero, asegúrese de tener estos configurados:

this.keyboard.disableScroll(false);
this.keyboard.hideKeyboardAccessoryBar(true);

a continuación, en su app.module.ts, busque lo siguiente:

IonicModule.forRoot(YourApp)

y hazlo así:

IonicModule.forRoot(YourApp, {
      scrollAssist: false,
      autoFocusAssist: false
    }),

Esto soluciona cualquier problema de salto que tenga, pero desafortunadamente tiene el efecto de empujar la barra de navegación fuera de la pantalla cuando un usuario está escribiendo. Sin embargo, este parece ser el único efecto secundario nocivo que he notado.

@ Tyler-Darby Gracias por compartir su solución, no es la mejor solución pero es razonable y funcionó para mí.

Tenía este problema y me estaba volviendo loco, pero finalmente descubrí que se debía a la aplicación de transform: translate3d(0,0,0) a los elementos para forzar la aceleración del hardware. Resulta que eso rompe el foco de entrada cuando aparece el teclado.

Estoy seguro de que esa no es la causa del problema de todos, pero espero que pueda ayudar a alguien.

Tengo varias plataformas y lo estaba arreglando ...

Puse app.component.ts:

constructor(
                ...
                public config: Config,
        ) {
                // all platforms
        this.config.set( 'scrollPadding', false )
        this.config.set( 'scrollAssist', false )
        this.config.set( 'autoFocusAssist', false )
        // android
        this.config.set( 'android', 'scrollAssist', true )
        this.config.set( 'android', 'autoFocusAssist', 'delay' )
               ...

Quizás sea útil para alguien.
Gracias chicos por las pistas;)

Mira el video:
https://www.dropbox.com/s/6p49z0chle9g1b9/git-ios-input.mov?dl=0

Información medioambiental:
paquetes globales:

@ionic/cli-utils : 1.3.0
Cordova CLI      : 7.0.1 
Ionic CLI        : 3.3.0

paquetes locales:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.3.0
@ionic/cli-plugin-ionic-angular : 1.3.0
Cordova Platforms               : ios 4.4.0
Ionic Framework                 : ionic-angular 3.3.0

Sistema:

Node       : v7.10.0
OS         : macOS Sierra
Xcode      : Xcode 8.3.2 Build version 8E2002 
ios-deploy : 1.9.0 
ios-sim    : 5.0.8

Usé <input/> como <ion-input></ion-input>
Pruébelo.

Hola @maulikakapure ,

Estoy comenzando mi primera aplicación iónica para mi empresa y también tengo el problema de desplazamiento / enfoque con el teclado. Obviamente encontraste una solución que has mostrado en tu video. ¿Podría proporcionar el código fuente? Todavía no he encontrado la combinación correcta de soluciones alternativas, parámetros de configuración y etiquetas html para usar.

Gracias

@ Tyler-Darby Hola Tyler, ¿dónde pongo el siguiente código?

this.keyboard.disableScroll(false);
this.keyboard.hideKeyboardAccessoryBar(true);

Hola @cwiejack

Consulte una demostración simple aquí: https://www.dropbox.com/s/1o9hrnjgt7u3bpy/BasicDemo.zip?dl=0

Gracias.

Para solucionar los problemas de palabras clave predeterminadas con Ionic, simplemente coloque lo siguiente en las importaciones de su app.module.ts:

    IonicModule.forRoot(MyApp, {
      scrollAssist: false,
      autoFocusAssist: false
    })

Eso solucionará los problemas del teclado de inmediato.

@aplimovil ¡ esto resolvió el problema en mi aplicación de Android! muchos saludos a ti buen hombre!

¿Qué sentido tiene tener scrollAssist & autoFocusAssist si establecerlos en true inutiliza las aplicaciones?

¿Existe algún caso en el que habilitarlos ofrezca algunas ventajas?

¡La solución de aplimovil parece haber solucionado todos los problemas que estaba teniendo!

Así que sí, me interesaría saber por qué alguna vez estableciste alguno de ellos como verdadero.

@JefferE Es porque las funciones scrollAssist y autoFocusAssist de Ionic están rotas en iOS (en Android casi funcionan bien, aunque las mejoras pasan prácticamente desapercibidas al menos para mí) y no parece haber notado todos los informes de problemas aquí lo suficiente para que lo solucionen en un próximo lanzamiento. Con suerte, algún día notarán este hilo y corregirán esas funciones para siempre en iOS o las desactivarán selectivamente de forma predeterminada por ahora en iOS.

cuando ion-textarea en la cuadrícula, keyboard.disablescroll (false) no funciona? ¿Cómo se soluciona el problema?

Esto funcionó para mi

imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp, {
            scrollPadding: false,
            scrollAssist: true,
            autoFocusAssist: false

    }),

Información iónica:

CLI Packages:

@ionic/cli-utils  : 1.10.2
    ionic (Ionic CLI) : 3.10.3

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.6.1

System:

    Android SDK Tools : 25.2.5
    ios-deploy        : 1.9.1 
    ios-sim           : 5.0.8 
    Node              : v6.11.3
    npm               : 3.10.10 
    OS                : macOS Sierra
    Xcode             : Xcode 8.3.3 Build version 8E3004b 

Solo quería que sepan que tengo un problema similar en iOS, que es que el teclado se desplaza sobre los campos de entrada y la pantalla de contenido no se actualiza para dejar espacio para el teclado.

lo importante que descubrí es que al usar complementos (como @ ionic-native / keyboard)
y hacer cosas en su interfaz en el momento en que el teclado se muestra con this.keyboard.onKeyboardShow().subscribe(()=>{ this.someFlag=true}) y usar la bandera en la interfaz para cambiar algo. no cambiará , tendrá que activar la detección de cambio angular usted mismo importando ChangeDetectorRef y usando su función detectChanges() en subscribe .

He creado este gitrepo para mostrar el caso. Estas en libertad de mirar. Esto fue una revelación para mí, ya que no me di cuenta de que hay casos en los que subscribe(()=>{}) en algo, hacen cambios, pero no se muestran en la interfaz.

se volvió un poco más sabio hoy :)

Lo último: ¡tengan todos un gran fin de semana!

Me desconcierta que este problema tenga más de 1,5 años y no se haya tomado ninguna medida. Esto está arruinando por completo el flujo de mi aplicación. Hace que parezca defectuoso y de mala calidad, y tenemos que dar como resultado hacks para que las cosas se vean casi bien. @mhartington, ¿hay algo que esté sucediendo internamente aquí?

Tuve una conversación telefónica con @matthewkremer de Ionic como seguimiento del uso de la versión PRO de ionic ahora, y presioné que este es un problema importante. Dijo que lo entendía y que trataría de llevar esto a una prioridad más alta.

Lo mismo para mi. Esto no se ve nada bien ..

Hola a todos, esto se está convirtiendo en una prioridad para nosotros, vean el tweet de @adamdbradley esta mañana: https://twitter.com/adamdbradley/status/916295747968040960

Espere actualizaciones en los próximos días / semanas

Suena bien. Espero que recuperemos la vida pronto sin aplicar trucos innecesarios.

Para las personas que ya usan WK, estoy preparando un nuevo complemento de teclado: cordova-plugin-ionic-wkkeyboard :

  1. Primero desinstale ionic-plugin-keyboard
cordova plugin rm ionic-keyboard-plugin --save
  1. Instalar nuevo complemento:
cordova plugin add cordova-plugin-ionic-wkkeyboard --save

cc @hitendramalviya @ ionut-movila @mmolhoek @ Tyler-Darby @yingbaby @maulikakapure @aplimovil

Hay un problema extraño con este nuevo wkkeyboard y deshabilitar / habilitar ion-textarea con FormGroups y FormControls. Después de volver a habilitar la forma completa, el área de iones de texto permanece deshabilitada. No sucede mientras se usa el teclado "antiguo".

Crearé un problema esta noche :).

// Editar:
Probablemente sea un problema relacionado con otra cosa. Mismo comportamiento en el navegador.
https://github.com/ionic-team/ionic/issues/13170

¿Qué debo buscar si el teclado simplemente no activa un cambio de tamaño y mucho menos un desplazamiento para ingresar?

Parece que el problema de desplazamiento ya debería estar resuelto, pero sigo experimentando problemas en ios donde cuando la entrada está en el medio de la pantalla, la entrada no se desplaza cuando el teclado está arriba. Este es un problema tanto cuando se toca la entrada como cuando utilizo las teclas de navegación del teclado. ¿Me estoy perdiendo de algo? He probado varias de las soluciones presentadas aquí, pero parece que no funcionan. (para obtener información adicional, estoy usando Ionic en el navegador, no como una aplicación nativa)

wow 2018 y nada.

me dieron esta solución pero no es del todo perfecta

.scroll-content {
padding-bottom: 0 !important;
}

Hola chicos, encontré accidentalmente que la compilación predeterminada tiene _cordova-plugin-ionic-keyboard_. Y cuando lo reemplacé por _ionic-plugin-keyboard_, los errores de entrada desaparecieron.

Entonces mi solución es:
plugin cordova rm teclado iónico
complemento ionic cordova agregar ionic-plugin-keyboard
npm install --save @ ionic-native / keyboard

+1

Vendettall, lo intenté pero no funcionó.

¿Tiene este molesto error con la barra de herramientas de encabezados?

El jueves 29 de marzo de 2018 a las 11:31 p.m., Emmanuel Fache [email protected]
escribió:

Vendettall, lo intenté pero no funcionó.

-
Estás recibiendo esto porque hiciste un comentario.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/ionic-team/ionic/issues/6228#issuecomment-377362762 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/AYPMdggjRqZBZ0wghtxFjVbPLViBkR8hks5tjUSQgaJpZM4IKhUp
.

Si aún tiene este problema, pruebe el complemento de teclado iónico más nuevo

ionic cordova plugin rm  ionic-keyboard-plugin
ionic cordova plugin add cordova-plugin-ionic-keyboard

Entonces establezca

<preference name="KeyboardResizeMode" value="ionic" />

En config.xml

Hola,
En la aplicación en la que estoy trabajando, todo funciona bien. Pero debido a alguna razón, tengo que usar las entradas dentro de la tabla html. En este caso, cada vez que hago clic en la entrada, vuelve a dibujar la tabla y restablece el desplazamiento de la tabla.
¿Alguien puede ayudar aquí?

también viendo el problema de transformación sucediendo. Es bastante molesto.
video-to-gif

Para desplazar pb, escribí un truco aquí: https://github.com/ionic-team/ionic/issues/10629#issuecomment -395084125

Este comentario sobre AbrahamLopez10 comentado el 1 de agosto de 2017 funcionó perfectamente para mí, desplazando los campos de entrada a la vista cuando aparece el teclado de Android.

@dylanvdmerwe , @ jgw96 @mhartington @ Tyler-Darby @manucorporat @adamdbradley

Hola chicos, acabo de crear una directiva personalizada para manejar este problema en las plataformas iOS y Android para aplicaciones Ionic 2 y 3. ¿Podría verificar si esto resuelve todos los problemas relacionados con este problema de desplazamiento?

Usé ponyfill de desplazamiento a la vista si es necesario para hacer esta directiva

Instale la directiva ion-input-scroll-into-view ejecutando el comando npm install ion-input-scroll-into-view

Paso 1
Adjunte la directiva ion-input-scroll-into-view al ion-input o ion-textarea de la siguiente manera.

<ion-input ion-input-scroll-into-view></ion-input>

<ion-textarea ion-input-scroll-into-view></ion-textarea>

Paso 2

Debe importar el IonInputScrollIntoViewModule en el module.ts de su componente principal de la siguiente manera

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ParentPage } from './parent';
import { IonInputScrollIntoViewModule } from 'ion-input-scroll-into-view';

@NgModule({
  declarations: [
    ParentPage
  ],
  imports: [
    IonicPageModule.forChild(ParentPage),
    IonInputScrollIntoViewModule
  ],
})
export class ParentPageModule {}

enlace npm: https://www.npmjs.com/package/ion-input-scroll-into-view
enlace de github: https://github.com/melwinVincent/ion-input-scroll-into-view

¡Gracias por el problema! Hemos movido el código fuente y los problemas de Ionic 3 a un repositorio separado. Voy a mover este problema al repositorio de Ionic 3. Por favor, haga un seguimiento de este problema allí.

¡Gracias por usar Ionic!

¿Fue útil esta página
0 / 5 - 0 calificaciones