Ionic-framework: Problemas con el teclado

Creado en 3 may. 2017  ·  98Comentarios  ·  Fuente: ionic-team/ionic-framework

Versión iónica: (marque una con "x")
[] 1.x
[x] 2.x
[x] 3.x

Estoy enviando un ... (marque uno con "x")
[x] informe de errores
[ ] solicitud de función
[] solicitud de soporte => No envíe solicitudes de soporte aquí, use uno de estos canales: https://forum.ionicframework.com/ o http://ionicworldwide.herokuapp.com/

Comportamiento actual:

Los teclados y el desplazamiento de entrada han sido durante mucho tiempo un desafío para las aplicaciones Ionic, incluso desde Ionic V1. Recientemente, nos hemos centrado en intentar solucionar estos problemas del teclado. Los problemas que actualmente creemos que son de mayor prioridad cuando se trata de teclados y entradas son los siguientes:

  • las entradas en las alertas a veces son "inestables"
  • Los formularios que tienen muchas entradas a veces tienen problemas de desplazamiento al enfocar las entradas más abajo en la página.
  • Cambiar entre entradas, áreas de texto y más a veces causa "rebotes" y otros problemas extraños en la interfaz de usuario
  • Tener una entrada bloqueada en la parte inferior de una vista no funciona correctamente en iOS (el teclado cubre la entrada)

Actualmente estamos trabajando en un enfoque doble para modificar la lógica en el marco que maneja estas cosas (principalmente para Android) junto con algunas modificaciones al complemento WKWebView para solucionar estos problemas para iOS. Ahora estamos en un punto en el que tenemos una rama del complemento WKWebView que tiene las correcciones para iOS y estamos listos para que nuestra comunidad comience a probar esto y a proporcionar comentarios. Hemos creado un documento de Google aquí que tiene instrucciones sobre cómo se puede probar. ¡Nos encantaría recibir comentarios sobre estas correcciones! No dude en enviarnos sus comentarios como comentario sobre este problema. ¡Gracias por usar Ionic a todos!

help wanted v3

Comentario más útil

En mi caso, la adición de AppModule a continuación produce una experiencia de usuario relativamente mejor que los valores predeterminados.

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

Todos 98 comentarios

En mi caso, la adición de AppModule a continuación produce una experiencia de usuario relativamente mejor que los valores predeterminados.

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

gracias a dios finalmente las oraciones son respondidas

  1. La barra de búsqueda dentro de la pestaña empuja la barra de pestañas hacia arriba.

¿Cómo probar en Android?
Estamos felices de ayudar siempre para Android o Desktop. :)

Hola @ mburger81 , ¡buena pregunta! Aún no hay una versión nocturna actualizada de ionic-angular out, pero cuando lancemos una, actualizaré este problema con las instrucciones sobre cómo instalarlo para probarlo en Android.

De acuerdo, estamos trabajando en una página de inicio de sesión donde tenemos algunos problemas de desplazamiento de entrada.
Así que creo que podemos comprobarlo.

Para su información, antes de que podamos probarlo y entregarlo a nuestro probador, debemos haber resuelto el error de VISTAS NO VÁLIDAS (feliz por el hito), porque este es un problema importante para nosotros

¡Te tengo! Entonces, en el problema del desplazamiento de entrada, ¿puede intentar colocar la entrada en un área de su vista que el teclado no cubra cuando se abre?

Esta es una buena idea. Es necesario asegurarse de que el cursor no vaya detrás de la barra, al desplazarse

Es necesario hacer, que el cursor no bloqueó el encabezado de iones, en un desplazamiento

Algunos comentarios de iOS de uno de los miembros de nuestro equipo @danbucholtz :

En los controles individuales que no se utilizan normalmente dentro de un formulario (por ejemplo, una entrada de búsqueda), ¿podemos investigar el cierre del teclado en "enviar" o "ingresar"?

Al realizar una acción de navegación, el teclado se cierra automáticamente si está abierto. Deberíamos revisar este comportamiento con respecto a las superposiciones. Por ejemplo, no puedo imaginar que haya muchos casos de uso al abrir un modal y mantener el teclado abierto. ActionSheet, Alert, Loading, Modal, Popover, Picker y Toast implican el inicio de una nueva acción (elegir una hora, por ejemplo) o comentarios sobre una acción completada (enviar o validar un formulario o algo). Creo que tiene sentido cerrar el teclado en el caso de abrir una superposición.

chats.html

<ion-footer *ngIf="send.load_spinner==false" class="backgound_send_message">
<ion-toolbar>

<textarea *ngIf="Record.StartRecordGo==false" [(ngModel)]="you_comment" (keydown)="handleKeyDown($event)" (focus)="scrollTobottom()" placeholder="{{'chats.message' | translate }}"  id="my-textarea0" class="my-textarea" rows="1" autosize></textarea>

    <button ion-button clear large color="primary" *ngIf="send.you_comment.length>0" (click)="SendMessageServer(items)"><ion-icon class="SendMess" ios="ios-send-outline" md="md-send"></ion-icon></button>


</ion-toolbar>
</ion-footer>

chats.ts

SendMessageServer(items) {
    this.text_message_me.push(this.you_comment);
   document.getElementById('my-textarea0').focus(); // The keyboard remains open
}

Este código es trabajo (OPEN KYEBOARD)

<ion-footer>
<ion-toolbar>
<textarea></textarea>
</ion-footer>
</ion-toolbar>

Cambia bien la altura, pero es mejor hacer la animación cuando cambia el tamaño

https://forum.ionicframework.com/t/no-documentation-for-scrollassist-autofocusassist-inputblurring-config-settings/88450?u=rohinmohandas

Podría ser útil tener la documentación para estas configuraciones si * pueden ayudar a lidiar con estos problemas relacionados con el teclado y la entrada, tal vez hasta que 3.2.0 esté disponible para el público.

¿Alguna solución relacionada con el caso en que el teclado oculta la entrada?

El siguiente código en app.component.ts produjo los efectos deseados de las entradas de pie de página que permanecen por encima del teclado tanto en iOS como en Android. Por alguna razón, el comportamiento de superposición de la barra de estado en Android afecta la forma en que el teclado oculta los elementos de entrada ubicados debajo de la altura del teclado.

import {Platform} from "ionic-angular";
import {Keyboard} from "@ionic-native/keyboard";
import {StatusBar} from "@ionic-native/status-bar";
import {SplashScreen} from "@ionic-native/splash-screen";

constructor(platform: Platform,public statusBar: StatusBar, public splashScreen: SplashScreen,
                public keyboard: Keyboard) {

        platform.ready().then(() => {
            if (platform.is("ios")) {
                statusBar.overlaysWebView(true);
                statusBar.styleBlackTranslucent();
            }
            splashScreen.hide();
            keyboard.hideKeyboardAccessoryBar(false); // use only on a need basis if accessory bar is needed.
            .
            .
            .

            }

Es necesario hacer, que el cursor no bloqueó el encabezado de iones, en un desplazamiento
key2
key1

¿Existe la posibilidad de que el # 7047 también se solucione?

¿Cómo funciona esto en los navegadores? ¿Iónico está agregando alguna funcionalidad adicional que rompa las entradas, o es solo un problema desafiante con los campos de entrada en dispositivos móviles?

Esta es mi solución, funciona bien.

  1. establecer hideKeyboardAccessoryBar en true
this.keyboard.hideKeyboardAccessoryBar(true)
  1. crear KeyboardAttachDirective.ts archivo
import { Directive, ElementRef, Input } from '@angular/core';
import { Content, Platform } from 'ionic-angular';
import { Keyboard } from '@ionic-native/keyboard';
import { Subscription } from 'rxjs/rx';


/**
 * <strong i="15">@name</strong> KeyboardAttachDirective
 * <strong i="16">@description</strong>
 * The `keyboardAttach` directive will cause an element to float above the
 * keyboard when the keyboard shows. Currently only supports the `ion-footer` element.
 *
 * ### Notes
 * - This directive requires [Ionic Native](https://github.com/driftyco/ionic-native)
 * and the [Ionic Keyboard Plugin](https://github.com/driftyco/ionic-plugin-keyboard).
 * - Currently only tested to work on iOS.
 * - If there is an input in your footer, you will need to set
 *   `Keyboard.disableScroll(true)`.
 *
 * <strong i="17">@usage</strong>
 *
 * ```html
 * <ion-content #content>
 * </ion-content>
 *
 * <ion-footer [keyboardAttach]="content">
 *   <ion-toolbar>
 *     <ion-item>
 *       <ion-input></ion-input>
 *     </ion-item>
 *   </ion-toolbar>
 * </ion-footer>
 * ```
 */

@Directive({
    selector: '[keyboardAttach]'
})
export class KeyboardAttachDirective {
    @Input('keyboardAttach') content: Content;

    private onShowSubscription: Subscription;
    private onHideSubscription: Subscription;

    private attachTime = 0;

    constructor(
        private elementRef: ElementRef,
        private platform: Platform,
        private keyboard: Keyboard
    ) {
        if (this.platform.is('cordova') && this.platform.is('ios')) {
            this.onShowSubscription = this.keyboard.onKeyboardShow().subscribe(e => this.onShow(e));
            this.onHideSubscription = this.keyboard.onKeyboardHide().subscribe(() => this.onHide());
        }
    }

    ngOnDestroy() {
        if (this.onShowSubscription) {
            this.onShowSubscription.unsubscribe();
        }
        if (this.onHideSubscription) {
            this.onHideSubscription.unsubscribe();
        }
    }

    private onShow(e) {
        let keyboardHeight: number = e.keyboardHeight || (e.detail && e.detail.keyboardHeight);

        if(this.attachTime > 1){
            if(
            keyboardHeight == 313 ||
            keyboardHeight == 258 ||
            keyboardHeight == 216 ||
            keyboardHeight == 253 ||
            keyboardHeight == 226 ||
            keyboardHeight == 271 ||
            keyboardHeight == 216 ||
            keyboardHeight == 264){
                this.setElementPosition(0)
            }else{
                if(this.attachTime > 2){
                    this.setElementPosition(0)
                }else{
                    this.setElementPosition(keyboardHeight);
                }
            }
        }else{
            this.setElementPosition(keyboardHeight);
        }
        this.attachTime ++
    };

    private onHide() {
        this.setElementPosition(0);
        this.attachTime = 0
    };

    private setElementPosition(pixels: number) {
        this.elementRef.nativeElement.style.paddingBottom = pixels + 'px';
        this.content.getScrollElement().style.marginBottom = (pixels + 44) + 'px';
        this.content.scrollToBottom()
    }
}
  1. utilizar
<ion-header (touchstart)="closeKeyboard()"></ion-header>

...

<ion-content #content (touchstart)="closeKeyboard()"></ion-content>

...

<ion-footer [keyboardAttach]="content" class="messagebar">
    <ion-toolbar no-border>
        <div class="toolbar-inner">
            <div #inputer style="-webkit-user-select: auto;padding:5px;font-size:16px; min-height:1.5em; width:100%;border:1px solid #ccc;background-color:#fff;" contenteditable="plaintext-only" (keyup)="keyup($event)" (focus)="onFocus($event)" (blur)="onBlur($event)"></div>
            <button ion-button small (tap)="send()" [disabled]="!msgContent.length">发送</button>
        </div>
    </ion-toolbar>
</ion-footer>
  1. agregue algunos métodos a XXXPage.ts
    onBlur(event) {
        if (this.keyboardOpen) {
            event.target.focus()
        }
    }

    keyup(event){
        this.msgContent = event.target.innerText
    }

    onFocus(event) {
        this.keyboardOpen = true
    }

    closeKeyboard() {
        this.keyboardOpen = false
        this.keyboard.close()
    }

enlace perview.gif

enlace preview.mov

@ lh4111 ¡Genial! Pero, ¿lo has probado en Android? Parece que no funciona.

Tenemos el mismo problema que @aspidvip
@ lh4111 ¿puedo preguntarle cuál es su solución? ¿Resuelve el problema con la entrada debajo del encabezado?

@kitkimwong No

@ mburger81

  1. utilice el método this.keyboard.hideKeyboardAccessoryBar(true) proporcionado por ion-native/keyboard para
    configurar la cubierta del teclado Page
  2. cuando el cursor se centra en la entrada, el teclado se abre. luego configure el ion-content padding-bottom para mostrar el ion-footer

Mi ingles no es muy bueno, espero que lo entiendas

¿De todos modos aquí se usa el complemento WKWebView que se mencionó en el primer hilo? ¿O todos estos comentarios están relacionados con UIWebView?

@ jgw96 Acabo de probar WKWebView en mi dispositivo iOS. Mucho mejorado para mí. Parece que el campo de entrada no permanece en la parte superior del teclado como cabría esperar y se retrasa, como que aparece al final. ¿Es un problema conocido?

¿Es esto solo iOS? No he probado en Android, pero ¿funciona allí?

Grabación:
https://1drv.ms/v/s!AqSDIyRRHLbYazFGbIPhOGLC4sA

CLI de Córdoba: 6.4.0
Versión del marco iónico: 3.0.1
Versión Ionic CLI: 2.1.14
Versión Ionic App Lib: 2.1.7
Versión de scripts de la aplicación iónica: 1.3.0
ios-deploy versión: 1.9.1
versión ios-sim: 5.0.12
SO: macOS Sierra
Versión de nodo: v7.4.0
Versión de Xcode: Xcode 8.3.2 Versión de compilación 8E2002

Hola @manucorporat FYI de mis pruebas. Ver publicación anterior y grabación. Nuestra aplicación es esencialmente una aplicación de chat, por lo que sería bueno saber si cree que ese problema se puede resolver.

@ jgw96 @manucorporat , ¿puede comentar sobre el estado de estas pruebas y cuándo llegarán las correcciones a producción? ¿O qué queda por hacer? Realmente lo agradecería.

@ jgw96 ¿Es posible que actualice este problema? Parece haber perdido el hito 3.3.0.

¿Alguna vez llegará una solución oficial para los problemas del teclado? Ha sido un dolor trabajar con él desde Ionic 1 y todavía no hay una solución oficial para algo tan importante como el teclado.

@nuvoPoint LoL, el problema del teclado ha

  1. https://github.com/ionic-team/ionic/issues/6228
  2. https://github.com/ionic-team/ionic/issues/5432

Y solo bloquean el problema .. LOL ...
Así que ... dejé el iónico por el problema del teclado hace un año, y ahora vuelvo aquí para ver si el teclado se ha arreglado, pero como ves, no han progresado en este año. :)

¡Parece que no quieren tener una solución oficial, incluso si este es un componente básico para una aplicación simple! Perderá a todos los desarrolladores que quieran crear una aplicación de chat. Input Box es un componente básico que interactúa con el usuario, con este maldito problema SOLO podemos usar IONIC para construir algunas APPS de información simple . ¿Y tal vez este es el posicionamiento de iónico ...? LOL. No lo sé.

Y si ve la discusión en el foro, muchos desarrolladores tienen el mismo problema y responden:
No es posible utilizar Ionic para crear una aplicación de chat nativa simple:

https://forum.ionicframework.com/t/about-to-give-up-with-ionic-3-simple-native-like-chat-page-not-possible/87548

Chicos, se está trabajando en el teclado y hay una rama para él en el complemento cordova para wk si quieren probarlo.

cordova plugin add https://github.com/driftyco/cordova-plugin-wkwebview-engine.git#keyboard-fixes --save

Estas son las correcciones actuales: https://github.com/ionic-team/cordova-plugin-wkwebview-engine/pull/131

Intente instalarlo y vea si es mejor o no. El equipo está buscando comentarios

Editado:

@AmitMY ¿cómo le gustaría que publique sus comentarios? ¿En este hilo?

Probé el WKWebView en mi dispositivo iOS. Mucho mejorado para mí.

Problema actual:
Parece que el campo de entrada no permanece en la parte superior del teclado como cabría esperar y se retrasa, como que aparece al final. ¿Es un problema conocido?

Grabación:
https://1drv.ms/v/s!AqSDIyRRHLbYazFGbIPhOGLC4sA

paquetes globales:
@ ionic / cli-utils: 1.2.0
CLI de Córdoba: 7.0.1
CLI iónico: 3.2.0

paquetes locales:
@ ionic / app-scripts: 1.3.7
@ ionic / cli-plugin-cordova: 1.2.1
@ ionic / cli-plugin-ionic-angular: 1.2.0
Plataformas Cordova: ios 4.4.0
Marco iónico: iónico-angular 3.0.1

Sistema:
Nodo: v7.4.0
SO: macOS Sierra
Xcode: Xcode 8.3.2 Versión de compilación 8E2002
ios-deploy: 1.9.1
ios-sim: 5.0.12

@jrmcdona Creo que deberías publicar @manucorporat lo verá cuando pueda
Trate de mantenerlo lo más profesional posible, como: es genial que tenga un video, pero también explique qué está mal en el video (para que podamos realizar un seguimiento de los problemas sin ver las grabaciones cada vez)

¿Alguna esperanza de arreglar las pestañas y el problema de apertura del teclado?

@ Floyd1256 Enlaza aquí, con toda la información que tengas. Este hilo completo probablemente se revisará a fines de la próxima semana y se realizarán correcciones de acuerdo con los comentarios.

Necesito una función de chat en mi aplicación iónica.
Probé cordova-plugin-wkwebview-engine.git # keyboard-fixes en mi proyecto, se han realizado grandes mejoras.
Sin embargo, todavía hay algo que no podemos hacer en comparación con la gestión del teclado nativo.
Mi referencia es la función de mensajería en mi teléfono, pero es lo mismo para las aplicaciones de chat más conocidas:
Cuando hacemos clic para escribir un nuevo mensaje, el teclado aparece y empuja el texto de entrada fijo inferior Y los últimos mensajes PERO no el encabezado fijo superior.
La animación push es fluida y podemos ver los últimos mensajes incluso cuando escribimos un mensaje nuevo.
Para tener un ejemplo, simplemente escriba y envíe un SMS con cualquier teléfono.

Me gustaría tener el mismo comportamiento con el teclado iónico en dispositivos Android, iOS y Windows.
En el teclado iónico actual, la animación de inserción es desigual y el teclado presiona la entrada fija inferior pero cubre los últimos mensajes (en todos los dispositivos).
Para las pruebas, simplemente agregue una entrada de texto en un pie de página iónico y escriba texto.
El desafío es grande, pero los usuarios finales no pueden aceptar un teclado como está, la brecha con uno nativo es evidente.
De lo contrario, gracias por el gran marco iónico.

¡Izquierda para crear una animación al cambiar el tamaño y la capacidad de deshabilitar el cambio de tamaño cuando el teclado parece subir pestañas no apareció! O hacer posible deshabilitar la apariencia de pestañas cuando se muestra el teclado

Recientemente desaparece desplazarse hacia los lados

Tengo un diseño interesante para este problema, agregando vista web anidada en la parte superior de la vista web principal. por lo que el desarrollador tiene la opción de separar la interfaz de usuario en 2 capas, una para el contenido principal y la segunda para cualquier interfaz de usuario que deba sincronizarse con el teclado.

@ Khalid-Nowaf, su vista principal no está subiendo en este diseño cuando el teclado se eleva. Entonces, en un escenario de chat o SMS, está ocultando todos sus mensajes. En iOS SMS, por ejemplo, los mensajes se insertan junto con el cuadro de texto de una manera muy fluida, para que siempre pueda ver el último mensaje enviado. Entonces, el teclado no cae después de ingresar texto, permanece allí hasta que continúe escribiendo y se vaya. Personalmente, creo que el diseño iónico debería imitar a iOS y Android (aunque no puedo hablar por Android porque nunca lo he usado). Tampoco sé nada sobre las complejidades para que esto suceda desde el punto de vista del desarrollo, pero espero que se acerque. Mejorado enormemente para mí con WKWebView.

@jrmcdona , el principal problema con el teclado ahora, es cómo hacer que el pie de página se desplace suavemente con el teclado. el complemento de teclado actual y la vista web intentan enviarse eventos entre sí, por lo que pueden administrar la animación y el cambio de tamaño, etc., y es difícil sincronizarlos entre sí. A veces, el teclado es más rápido que la animación de la vista web. así que lo que estoy tratando de abordar aquí es interducir una segunda vista web en la parte superior de la vista principal. y de forma nativa, el teclado lo empujará hacia arriba, mientras que la vista web principal puede tener la opción de desplazarse o no "dependiendo de lo que quiera el desarrollador" y desplazarse por la vista principal no es un problema ahora, creo. la aplicación de chat como es lo que hace la mayor parte del problema, porque todo está en una sola capa.

Alguien en el foro dice que hay un excelente complemento que solucionó perfectamente el problema del teclado.
Https://github.com/EddyVerbruggen/cordova-plugin-native-keyboard
Una mala noticia es que este complemento es de pago.

Además, con solo probar la "rama de teclado fijo" de iónico, todavía hay un gran problema y una mala experiencia de usuario.

@kitkimwong Wow, eso se ve bien, excepto por el hecho de que es bastante caro (especialmente por el hecho de que ionic es gratis). @manucorporat definitivamente deberías echarle un vistazo

Ese complemento aparece en los documentos iónicos. Lo probaré hoy y veré cómo funciona. $ 200 no es tan caro para algunas empresas, supongo. Dos horas de tiempo de los desarrolladores pagarán por eso y supongo que podrías pasar horas jugando con el teclado sin el complemento.
http://ionicframework.com/docs/native/native-keyboard/ ¡No me malinterpretes, preferiría no pagar, pero podría hacerlo!

He creado un repositorio para probar el teclado, con este repositorio puedes probar

  • aplicación de chat como
  • formas y muchas entradas "forma prueba iónica E2E"
  • wkwebview para ios ** nuevo
  • RTL

aquí está algo de mi demostración



enlace de repositorio: https://github.com/Khalid-Nowaf/ionic-keyboard

todo lo que tienes que hacer después de clonar el repositorio
sh ionic cordova run ios --prod ionic cordova run android --prod

7047

¿Podría ser una idea incluir el campo de entrada real de forma nativa como una opción para el teclado? Entonces no dependeríamos de que la representación DOM no sea lo suficientemente rápida, y tener la entrada pegada al teclado sería más fácil de implementar.

Me viene a la mente el viejo dicho "cuando tienes un martillo, todo parece un clavo"; así que tal vez debamos abordar todo de manera diferente.

@larssn eso es lo que hace el complemento de teclado pagado. Entonces parece una buena opción.

@jrmcdona Podría estar bien, sí. Aunque preferiría tener una solución interna que funcione al 100%. En el pasado, me he vuelto dependiente de varios complementos que se deterioraron y mantenerlos fue una pequeña pesadilla.

@larssn no estaba sugiriendo usar el complemento. Estaba sugiriendo su idea para que ionic haga que el diseño suene bien y también es lo que hace el complemento.

Hasta que recibamos algunos comentarios del equipo iónico sobre los problemas actuales del teclado, si alguien quiere probar el complemento de pago, creé un repositorio aquí. Sin embargo, no puedo hacer que el teclado aparezca inicialmente por alguna razón. Tengo que hacer clic en Alternar en la esquina superior derecha para que aparezca. No puedo entender por qué no se mostrará cuando se cargue la página. Como la demostración.

https://github.com/jrmcdona/keyboard-test

Una solución que funcionó para mí:

  • Utilice input lugar de ion-input

@SoldierCorp, ¿ te refieres a la rama de prueba WkWebView iónica proporcionada? ¿O UIWebView?

@jrmcdona En la plantilla del componente, el propio elemento html.

Teniendo en cuenta todos los comentarios y expectativas sobre este tema, ¿por qué no pensar en proporcionar
un componente de chat dedicado que incluye teclado y entrada de texto? Es demasiado difícil crear uno por desarrolladores comunes y sería frustrante usar un complemento de terceros, incluso si parece ser realmente bueno

De acuerdo con eso al 100%. Si no se puede lograr debido a ciertas complejidades a las que se han enfrentado, también sería muy útil para todos saberlo.

@AmitMY @manucorporat Respecto a la rama de prueba WKWebView. Cree que el teclado no debería cerrarse después de presionar enviar.
Tal como lo vería durante una conversación SMS en iOS. Si el desarrollador no quiere ese comportamiento, puede llamar al método de cierre del teclado, pero de forma predeterminada debe permanecer abierto para que las personas puedan emitir mensajes durante un escenario de chat sin que el teclado rebote hacia arriba y hacia abajo.

¿Cuál es el estado de esta rama? ¿Sería posible hacer visibles las últimas novedades sobre el teclado? @AmitMY @manucorporat @ jgw96

@jrmcdona se fusionó en master. Siéntete libre de probarlo:
[email protected]

Ok! 👍🏼

@manucorporat ¿Simplemente instalo npm [email protected] para obtener esa compilación?
Intenté eso pero no fue válido. No estoy seguro de cómo obtener eso, excepto la compilación que quieres que pruebe.

@jrmcdona ejecuta npm v ionic-angular versions --json para ver qué versiones se publican

@jrmcdona

npm install ionic-angular<strong i="7">@nightly</strong>

Ok, gracias @manucorporat . Eliminé la rama de prueba WKWebView y la agregué con la última versión.
<plugin name="cordova-plugin-wkwebview-engine" spec="^1.1.3" />

Luego actualicé Angular a 4.1.3 para poder instalarlo todas las noches.

Parece que aún no está listo para el horario de máxima audiencia. La rama de prueba de WKWebView se comportó mejor que la que tenemos ahora. Con esta versión, la caja de entrada no se eleva en absoluto. Solo el teclado sin entrada. En la rama de prueba, el teclado se levantaría pero solo un poco retrasado. No es ideal pero se puede conectar con el trabajo.

¿Alguien tiene un repositorio de trabajo del teclado funcionando bien?

¿Es este un problema conocido, hay una lista de problemas conocidos?
¿Debería registrar nuevos problemas?

Aquí hay un video.
https://1drv.ms/v/s!AnyXOztVClZYbfswP -UEtaHEU0I

Aquí está el código:

<div class="chat-window-container" style="padding-top:20px">
  <div class="chat-window">
    <div class="message-list">

      <chat-message *ngFor="let message of messages | async" [message]="message">
      </chat-message>

    </div>

    <message-input>

      <div style="flex:1;padding-left:5px;">
        <ion-input [(ngModel)]="draftMessage.text" (keydown.enter)="onEnter($event)" autofocus="" placeholder="Type to chat..." maxlength="2000"></ion-input>
      </div>
      <div (click)="onEnter($event)" style="display:table;width:50px;height:100%">
        <ion-icon name="send" color="primary" class="message-send-icon"></ion-icon>
      </div>
    </message-input>
  </div>
</div>

Gracias a todos

@jrmcdona sí, aún no se ha lanzado, estamos preparando un nuevo complemento de teclado:

  1. Actualice la CLI:
    ''
    npm install -g ionic

2. Make sure you are using ionic-framework nightly or 3.4

3. Make sure you are using the latest WK plugin

4. Remove ionic-keyboard-plugin: **SUPER IMPORTANT STEP!!!!**

5. Install the new keyboard plugin: 
 ```
ionic cordova plugin add https://github.com/ionic-team/cordova-plugin-keyboard --save

¡POR FAVOR! déjame saber cómo te funciona

@manucorporat
La versión 3.4 aún no está publicada.

Nightly y las otras versiones publicadas recientemente me fallan por no ser válidas. Ver captura de pantalla

screen shot 2017-06-14 at 7 27 24 pm

@jrmcdona, ¿ ha intentado eliminar node_module y ejecutar npm install nuevamente? asegúrese de usar --save en ionic-angular @ nightly.

Sin embargo, 3.4 se lanzará hoy.

¡La interfaz de usuario de

No estaba seguro de cómo importar el teclado a la aplicación para jugar con los métodos Mostrar / Ocultar.
(es decir, importar {Keyboard} desde '@ ionic-native / keyboard';)

Parece que si hace clic en el botón enviar, el teclado se cierra automáticamente (no lo estoy cerrando en código porque no tengo el teclado importado a la aplicación para usar los métodos Keyboard.Show, etc.) ¿Será posible mantener el teclado abierto como funciona iOS SMS?

Aquí hay una grabación.
https://1drv.ms/v/s!AnyXOztVClZYcY3vYXiXYaAZNdE

¿Me pregunto si alguna vez ha jugado con la inclusión de la entrada con el complemento del teclado y la ha diseñado de acuerdo con el tipo de dispositivo?

¡Buen trabajo Manu!

@manucorporat, de hecho, grandes mejoras, ¿podría agregar una opción para empujar el contenido (excepto el encabezado) para que podamos ver los últimos mensajes cuando el teclado está abierto y el texto de entrada está fijo en la parte inferior?

¿Qué complementos necesito instalar para que funcione el teclado?

@aspidvip Manu lo menciona en algunas publicaciones. Lo copiaré aquí.

Actualice la CLI:
npm install -g ionic
Asegúrese de estar usando ionic-framework todas las noches o 3.4

Asegúrese de estar utilizando el último complemento de WK

Eliminar el plugin de teclado iónico: ¡¡¡PASO SUPER IMPORTANTE !!!!

Instale el nuevo complemento de teclado:

complemento de ionic cordova agregar https://github.com/ionic-team/cordova-plugin-keyboard --save

¿Y cómo acceder a un nuevo teclado de complemento?

Es bueno si el teclado se agrega como un niño en el div: ~

~ Por ejemplo, el trabajo del complemento google maps

¿Cómo avanza el trabajo con el teclado?

Fantástico trabajo @manucorporat . Acabo de actualizar de 3.2 a 3.5 todas las noches (@ 3.5.3-201707261447) y parece funcionar según lo previsto en la mayoría de los formularios que tengo en mi aplicación.

Ahora solo necesitamos publicar una demostración de la aplicación que muestre todo esto funcionando. Si hay interés, puedo intentar contribuir durante el fin de semana.

¡Gracias por todo el trabajo realizado en este @manucorporat! (Y todos los que lo han probado también).

@ Peege151 Definitivamente estoy interesado en una demostración de la aplicación de esto. Estoy llegando al punto de incorporar un teclado en mi aplicación para chatear, por lo que podré probarlo a fondo cuando esté listo e informar aquí.

@ Peege151 ¡Me encantaría ver una demostración de la aplicación!

Bien, esto puede ser un shock, pero todavía estoy en Ionic 2.2.1 y actualmente no puedo actualizar a la última porque creo que introducirá nuevos errores que no puedo permitirme tener en este momento.
Este https://github.com/driftyco/cordova-plugin-wkwebview-engine.git#keyboard -fixes parece funcionar, pero me temo que aún bloqueará la aplicación en iOS con el error "Más tareas ejecutadas y luego programadas". .

¿Puedo usar https://github.com/driftyco/cordova-plugin-wkwebview-engine.git aún con el Ionic 2.2.1? ¿Cualquier oportunidad?

Así que probé la última versión de este complemento 1.1.3 con Ionic 2.2.1, seguí las instrucciones en el repositorio de github, agregué el código a continuación y eliminé ionic-plugin-keyboard (asumí que esto es lo que @manucorporat quiso decir en su comentario) - instaló npm para el complemento, construyó la aplicación y la probó.
En el simulador de iOS con iOS versión 10+ y funcionó bien como se esperaba sin problemas y sin fallas. Todavía tengo que probarlo en un teléfono real (anteriormente, mi aplicación fallaba cuando usaba la solución aquí https://stackoverflow.com/questions/36706398/in-ionic-2-how-to-float-an-element-above- el-teclado-cuando-se-muestra-el-teclado / 36804830 # 36804830)
Un consejo para que el teclado desaparezca, agréguelo al botón
(mousedown)="$event.preventDefault()"

El config.xml incluido

<feature name="CDVWKWebViewEngine">
  <param name="ios-package" value="CDVWKWebViewEngine"/>
</feature>
<plugin name="cordova-plugin-wkwebview-engine" spec="~1.1.3"/>
<plugin name="cordova-plugin-keyboard" spec="https://github.com/ionic-team/cordova-plugin-keyboard"/>
<allow-navigation href="http://localhost:8080/*"/>

Tengo tres preguntas, si alguien puede ayudar:
1- ¿Las cosas seguirán funcionando normalmente en Android después de eliminar el teclado-plugin-iónico?
2- ¿Es esto <allow-navigation href="http://localhost:8080/*"/> correcto? con localhost: 8080 ?
3- ¿Debo eliminar este código a continuación del config.xml

<feature name="Keyboard">
  <param name="ios-package" onload="true" value="IonicKeyboard"/>
</feature>

Si tu problema está en Android, esto te ayudará. En el archivo config.xml iónico, agregue las siguientes líneas en la etiqueta platform name = "android".

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

Esto evitará que el teclado empuje hacia arriba todo y simplemente superponga el teclado sobre el contenido. Entonces el comportamiento será el mismo o similar al del teclado ios

@Jatapiaro No funciona del todo bien cuando tienes una entrada en la parte inferior de la vista, el teclado la ocultará y no podrás ver lo que estás escribiendo.

Realmente no creo que Ionic sea el mejor lugar para una aplicación de chat. Nunca pude hacerlo bien y creo que ha sido una lucha durante algunos años por todas las publicaciones y comentarios. Solo mi opinión personal. Si hubiera una aplicación de chat de muestra que funcione para ionic en iOS y Android, eso realmente podría ayudar a las personas.

Sí, de hecho, pagamos por eso y ¡fue bastante bueno! Esa sería la mejor ruta para las personas que pueden pagarlo. En mi experiencia de todos modos.

En algún lugar del complemento de teclado EddyVerbruggen, Max Lynch había mencionado que ese complemento formaba parte del paquete de chat Ionic. Le pregunté al respecto en ese hilo y también le tuiteé. No obtuve una respuesta. No estoy seguro de qué trataba el paquete de chat. Ha pasado un tiempo desde que presté atención, así que tal vez haya una actualización sobre eso ...

Si recuerdo correctamente, vi en algún lugar de Twitter hace una semana que Ionic está trabajando en una actualización / nuevo complemento de teclado ... si no me equivoco, manténgalo tranquilo, espere y vea

hola tengo un proyecto IONIC v1, y descubro que el botón de retorno a veces no es válido. Me molestó durante mucho tiempo, necesito ayuda gracias

@miaozhenkun este repositorio es para Ionic v3 +, para v1 use https://github.com/ionic-team/ionic-v1

@astec ¿Eres chino? muchas gracias

el teclado tiene un problema con la barra de texto de iones

<ion-card class="cards " > <div class="relative"> <div class="image_container"> <img class="imageFull" src="http://via.placeholder.com/200x200" /> </div> <ion-row class=" absolute bottom0 "> <ion-item> <ion-textarea placeholder="Message..." > </ion-textarea> </ion-item> </ion-row> </div> </ion-card>

Estoy usando la lista de la tarjeta anterior con el CSS siguiente
.relativo{
posición: relativa ! importante;
}
.absoluto{
posición: absoluta ! importante;
}
.bottom0 {
abajo: 0;
}

cuando hago clic en el área de texto, se abre el teclado pero no se desplaza hacia el elemento, pero cuando escribo algo, se desplaza al área de texto.

He observado que el problema solo existe si usamos positon relativo para cualquier padre de ion-textarea.

¿Alguna solución de workaroud con posición relativa?

¡Hola chicos!
cualquiera ha encontrado una solución para esto.
tu ayuda es apreciada.

`paquetes cli: (/usr/local/Cellar/node@6/6.12.2/lib/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

paquetes globales:

cordova (Cordova CLI) : 8.0.0

paquetes locales:

@ionic/app-scripts : 3.1.6
Cordova Platforms  : android 6.3.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

Sistema:

Android SDK Tools : 26.1.1
Node              : v6.12.2
npm               : 5.5.1 
OS                : macOS Sierra
Xcode             : Xcode 9.2 Build version 9C40b

Variables de entorno:

ANDROID_HOME : /Users/santhoshgl/Library/Android/sdk

Misc:

backend : legacy`

agregar a su botón de clic (mousedown)="$event.preventDefault(); yourFunction()"

¿Hay noticias?

Creo que querrás esperar y usar Avocado @mladilav

Hemos tenido un problema con nuestro teclado iOS en las entradas de iones, en resumen, la entrada no tendrá un signo de intercalación después de que aparezca el teclado, el usuario puede escribir correctamente en el campo. Probé una variedad de versiones iónicas diferentes, versiones de webview, etc., todo sin éxito. Creo que es un problema en el que si es necesario desplazarse por la entrada de iones, tendrá problemas, si la entrada de iones estaba en la parte superior de la página, no parece tener el problema.

Sin embargo, encontré una cosa que solucionó completamente nuestro problema: construí esa aplicación en Xcode 8.3.3. Todas las compilaciones anteriores que estaba probando usaban Xcode 9.0 para la última versión de Xcode 9.3 que salió hace un par de días. El problema con esta solución es que creo que Apple podría eliminar las aplicaciones que se envían desde Xcode 8 en un futuro próximo. ¿Alguien tiene alguna otra idea?

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

¡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