Ionic-framework: Problemas de teclado

Criado em 3 mai. 2017  ·  98Comentários  ·  Fonte: ionic-team/ionic-framework

Versão iônica: (marque um com "x")
[] 1.x
[x] 2.x
[x] 3.x

Estou enviando um ... (marque um com "x")
[x] relatório de bug
[] solicitação de recurso
[] solicitação de suporte => Não envie solicitações de suporte aqui, use um destes canais: https://forum.ionicframework.com/ ou http://ionicworldwide.herokuapp.com/

Comportamento atual:

Teclados e rolagem de entrada têm sido um desafio para os aplicativos Ionic, mesmo desde o Ionic V1. Recentemente, colocamos o foco em tentar resolver esses problemas de teclado. Os problemas que atualmente consideramos a maior prioridade quando se trata de teclados e entradas são os seguintes:

  • entradas em alertas às vezes são "instáveis"
  • Formulários que têm muitas entradas às vezes têm problemas de rolagem ao focalizar as entradas mais abaixo na página
  • Alternar entre entradas, áreas de texto e muito mais às vezes causa "saltos" e outros problemas estranhos de interface do usuário
  • Ter uma entrada bloqueada na parte inferior de uma visualização não funciona corretamente no iOS (o teclado cobre a entrada)

Atualmente, estamos trabalhando em uma abordagem dupla para modificar a lógica na estrutura que lida com essas coisas (principalmente para Android), juntamente com algumas modificações no plug-in WKWebView para corrigir esses problemas para iOS. Estamos em um ponto agora em que temos uma ramificação do plug-in WKWebView que contém as correções para iOS e estamos prontos para que nossa comunidade comece a testar isso e fornecer feedback. Fizemos um documento do Google aqui que contém instruções sobre como isso pode ser testado. Adoraríamos receber comentários sobre essas correções! Sinta-se à vontade para fornecer feedback como um comentário sobre este problema. Obrigado por usar o Ionic a todos!

help wanted v3

Comentários muito úteis

No meu caso, a adição de AppModule abaixo da importação produz uma experiência do usuário relativamente melhor do que os padrões.

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

Todos 98 comentários

No meu caso, a adição de AppModule abaixo da importação produz uma experiência do usuário relativamente melhor do que os padrões.

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

graças a Deus finalmente as orações foram respondidas

  1. A barra de pesquisa dentro da guia empurra a barra de guias para cima.

Como testar no Android?
Estamos felizes em ajudar sempre para Android ou Desktop. :)

Ei @ mburger81 , boa pergunta! Ainda não há uma versão noturna atualizada do ionic-angular out, mas quando lançarmos um, atualizarei esse problema com as instruções sobre como você pode instalá-lo para teste no Android.

Ok, obrigado, estamos trabalhando em uma página de login onde temos alguns problemas de rolagem de entrada.
Então, acho que podemos verificar.

Para sua informação, antes de podermos testá-lo e liberá-lo para nosso testador, precisamos ter resolvido o bug INVALID VIEWS (feliz pelo marco), porque este é um problema de quebra para nós

Entendi! Portanto, quanto ao problema de rolagem de entrada, você pode tentar colocar a entrada em uma área de sua visão que o teclado não cubra quando é aberto?

Essa é uma boa ideia. É necessário certificar-se de que o cursor não vai para trás da barra, ao rolar

É necessário fazer, que o cursor não bloqueou o cabeçalho do íon, em uma rolagem

Alguns comentários do iOS de um dos membros da nossa equipe @danbucholtz :

Em controles individuais que normalmente não são usados ​​em um formulário (por exemplo, uma entrada de pesquisa), podemos investigar o fechamento do teclado ao "enviar" ou "inserir"?

Ao realizar uma ação de navegação, o teclado é fechado automaticamente se estiver aberto. Devemos rever esse comportamento em relação às sobreposições. Por exemplo, não posso imaginar que haja muitos casos de uso ao abrir um modal e manter o teclado aberto. ActionSheet, Alert, Loading, Modal, Popover, Picker e Toast implicam no início de uma nova ação (escolher um horário, por exemplo) ou feedback sobre uma ação concluída (enviar ou validar um formulário ou algo assim). Acho que faz sentido fechar o teclado no caso de abrir uma sobreposição.

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 está funcionando (OPEN KYEBOARD)

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

Muda bem a altura, mas é melhor fazer a animação quando o tamanho muda

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

Pode ser útil ter a documentação para essas configurações se * elas puderem ajudar a lidar com esses problemas relacionados ao teclado e às entradas, talvez até que 3.2.0 seja disponibilizado ao público.

Alguma solução relacionada ao caso em que o teclado oculta a entrada?

O código a seguir em app.component.ts produziu os efeitos desejados de entradas de rodapé acima do teclado no iOS e no Android. Por algum motivo, o comportamento de sobreposição da barra de status no Android afeta a maneira como o teclado oculta os elementos de entrada posicionados abaixo da altura do 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.
            .
            .
            .

            }

É necessário fazer, que o cursor não bloqueou o cabeçalho do íon, em uma rolagem
key2
key1

Há alguma chance de que # 7047 também seja consertado?

Como isso funciona em navegadores, na verdade? O iônico está adicionando qualquer funcionalidade extra que interrompa as entradas ou isso é apenas um problema desafiador com campos de entrada em dispositivos móveis?

Esta é minha solução, funciona bem.

  1. defina hideKeyboardAccessoryBar para true
this.keyboard.hideKeyboardAccessoryBar(true)
  1. criar KeyboardAttachDirective.ts arquivo
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. usar
<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. adicione alguns 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()
    }

link perview.gif

link preview.mov

@ lh4111 Ótimo! Mas você já testou no android? Parece que não funciona.

Temos o mesmo problema que @aspidvip
@ lh4111 posso perguntar qual é a sua solução? Isso resolve o problema com a entrada sob o cabeçalho?

@kitkimwong Eu não testei no android, mas acho que os princípios devem ser semelhantes.

@ mburger81

  1. use o método this.keyboard.hideKeyboardAccessoryBar(true) fornecido pelo ion-native/keyboard para
    definir a capa do teclado Page
  2. quando o cursor focar na entrada, o teclado será aberto. em seguida, defina o padding-bottom ion-content para mostrar o ion-footer

Meu inglês não é muito bom, espero que você possa entender

De qualquer forma aqui está usando o plugin WKWebView que foi mencionado no primeiro tópico? Ou todos esses comentários são em relação ao UIWebView?

@ jgw96 Acabei de testar o WKWebView no meu dispositivo iOS. Melhorou muito para mim. Parece que o campo de entrada não fica bem no topo do teclado como você esperava e está atrasado, meio que aparece no final. Esse é um problema conhecido?

Este é apenas iOS? Não testei no Android, mas funciona lá?

Gravação:
https://1drv.ms/v/s!AqSDIyRRHLbYazFGbIPhOGLC4sA

Cordova CLI: 6.4.0
Versão Ionic Framework: 3.0.1
Versão Ionic CLI: 2.1.14
Versão Ionic App Lib: 2.1.7
Versão dos scripts do aplicativo Ionic: 1.3.0
versão ios-deploy: 1.9.1
versão ios-sim: 5.0.12
SO: macOS Sierra
Versão do nó: v7.4.0
Versão do Xcode: Xcode 8.3.2 Build versão 8E2002

Olá @manucorporat FYI dos meus testes. Veja a postagem acima e a gravação. Nosso aplicativo é essencialmente um aplicativo de bate-papo, portanto, seria ótimo saber se você acha que esse problema pode ser resolvido.

@ jgw96 @manucorporat você pode comentar sobre o status deste teste e quando as correções de brnach entrarão em produção? Ou o que resta fazer? Eu realmente aprecio isso.

@ jgw96 É possível que você atualize este problema? Parece ter perdido o marco 3.3.0.

Haverá uma solução oficial para os problemas do teclado? Tem sido difícil trabalhar com o Ionic 1 e ainda não há uma correção oficial para algo tão importante quanto o teclado.

@nuvoPoint LoL, o problema do teclado dura há quase 1,5 anos:

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

E eles apenas bloqueiam o problema .. LOL ...
Então ... desisti do iônico por causa do problema do teclado há um ano atrás, e agora, volto aqui para ver se o teclado foi consertado, mas como você pode ver, eles não tiveram nenhum progresso neste ano. :)

Parece que eles não querem ter uma correção oficial, mesmo que este seja um componente básico para um aplicativo simples !! Ele perderá todos os desenvolvedores que desejam construir um aplicativo de chat. A caixa de entrada é um componente básico que interage com o usuário, com esse maldito problema SÓ podemos usar o IONIC para construir alguns aplicativos de informação simples . E talvez este seja o posicionamento do iônico ...? RI MUITO. Eu não sei.

E se você vir a discussão no fórum, muitos desenvolvedores têm o mesmo problema e resposta:
Usar Ionic para construir um aplicativo nativo simples, como um aplicativo de bate-papo, não é possível:

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

Pessoal, o teclado está sendo trabalhado, e tem um branch dele no plugin cordova do wk se vocês quiserem testá-lo.

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

Estas são as correções atuais: https://github.com/ionic-team/cordova-plugin-wkwebview-engine/pull/131

Experimente instalar e veja se fica melhor ou não. A equipe está procurando feedback

Editado:

@AmitMY, como você gostaria que eu postasse feedback? Neste tópico?

Testei o WKWebView no meu dispositivo iOS. Melhorou muito para mim.

Questão atual:
Parece que o campo de entrada não fica bem no topo do teclado como você esperava e está atrasado, meio que aparece no final. Esse é um problema conhecido?

Gravação:
https://1drv.ms/v/s!AqSDIyRRHLbYazFGbIPhOGLC4sA

pacotes globais:
@ ionic / cli-utils: 1.2.0
Cordova CLI: 7.0.1
Ionic CLI: 3.2.0

pacotes locais:
@ 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
Estrutura Iônica: Iônico-angular 3.0.1

Sistema:
Nó: v7.4.0
SO: macOS Sierra
Xcode: Xcode 8.3.2 Build versão 8E2002
ios-deploy: 1.9.1
ios-sim: 5.0.12

@jrmcdona Acho que você deveria postar feedback aqui. @manucorporat vai dar uma olhada quando puder
Tente ser o mais profissional possível, como - é ótimo que você tenha um vídeo, mas também explique o que há de errado no vídeo (para que possamos acompanhar os problemas sem assistir às gravações todas as vezes)

Alguma esperança de consertar as guias e o problema de abertura do teclado?

@ Floyd1256 Faça um link aqui, com todas as informações que você possui. Este tópico inteiro provavelmente será revisado no final da próxima semana e as correções serão feitas de acordo com o feedback

Preciso de um recurso de bate-papo no meu aplicativo iônico.
Eu testei cordova-plugin-wkwebview-engine.git # keyboard-fixes em meu projeto, grandes melhorias foram feitas.
No entanto, ainda há algo que não podemos fazer em comparação com o gerenciamento de teclado nativo.
Minha referência é o recurso de mensagens no meu telefone, mas é a mesma coisa para os maiores aplicativos de bate-papo conhecidos:
Quando clicamos para escrever uma nova mensagem, o teclado aparece e empurra o texto de entrada fixo inferior E as últimas mensagens MAS não o cabeçalho fixo superior.
A animação push é suave e podemos ver as últimas mensagens mesmo quando digitamos uma nova mensagem.
Para dar um exemplo, basta escrever e enviar um SMS com qualquer telefone.

Eu gostaria de ter o mesmo comportamento com o teclado iônico em dispositivos Android, iOS e Windows.
No teclado iônico atual, a animação push é irregular e o teclado empurra a entrada fixa inferior, mas cobre as últimas mensagens (em todos os dispositivos).
Para teste, basta adicionar uma entrada de texto em um rodapé iônico e digitar o texto.
O desafio é grande, mas os usuários finais não podem aceitar um teclado como está, a diferença com um nativo é gritante.
Caso contrário, obrigado pela ótima estrutura iônica.

Esquerda para criar uma animação ao redimensionar e a capacidade de desativar o redimensionamento quando o teclado aparece para cima as guias não aparecem! Ou torne possível desativar a aparência de guias quando o teclado é exibido

Desaparece recentemente rolar para o lado

Tenho um design interessante para esse problema, adicionando aninhamento de webview no topo do webview principal. portanto, o desenvolvedor tem a opção de separar a IU em 2 camadas, uma para o conteúdo principal e a segunda para qualquer IU que precise ser sincronizada com o teclado.

@ Khalid-Nowaf sua visualização principal não está aumentando neste design conforme o teclado sobe. Portanto, em um cenário de bate-papo ou SMS, você está cobrindo todas as suas mensagens. No iOS SMS, por exemplo, as mensagens são empurradas junto com a caixa de texto de uma forma muito suave - para que você possa sempre ver a última mensagem enviada. Assim, o teclado não cai depois de inserir o texto, ele permanece lá até que você continue digitando e saia. Pessoalmente, acho que o design iônico deve imitar o iOS e o Android (embora não possa falar pelo Android, pois nunca usei um). Eu também não sei nada sobre as complexidades de fazer isso acontecer do ponto de vista do desenvolvimento, mas espero que fique mais perto. Muito melhorado para mim com WKWebView.

@jrmcdona , o principal problema com o teclado agora, é como fazer o rodapé rolar suavemente com o teclado. o plug-in do teclado atual e a visualização da web tentam enviar eventos um ao outro, para que possam gerenciar a animação e o redimensionamento ..etc, e é difícil sincronizá-los. Às vezes, o teclado é mais rápido do que a animação do webview. então o que estou tentando abordar aqui é interduzir uma segunda visualização da web no topo da visualização principal. e nativamente o teclado irá empurrá-lo para cima, enquanto a visualização da web principal pode ter a opção de ser rolada ou não "depende do que o desenvolvedor deseja" e rolar a visualização principal não é um problema agora, eu acho. o app de chat é o que faz a maior parte do problema, porque tudo está em uma única camada.

Alguém no fórum disse que existe um excelente plugin que corrigiu perfeitamente o problema do teclado.
Https://github.com/EddyVerbruggen/cordova-plugin-native-keyboard
Uma má notícia é que este plugin é pago.

Além disso, apenas testando o "ramo de teclado fixo" do iônico, ainda há um grande problema e uma má experiência do usuário.

@kitkimwong Uau, que parece bom, exceto pelo fato de que é muito caro (especialmente pelo fato de que o iônico é gratuito). @manucorporat você definitivamente deveria dar uma olhada nisso

Esse plugin está listado na documentação iônica. Vou experimentar hoje e ver no que vai dar. Acho que $ 200 não é tão caro para algumas empresas. Duas horas do tempo de um desenvolvedor vão pagar por isso e eu acho que você poderia gastar horas mexendo no teclado sem o plugin.
http://ionicframework.com/docs/native/native-keyboard/ Não me interpretem mal, preferia não pagar, mas posso!

Eu criei um repo para testar o teclado, com este repo você pode testar

  • app chat como
  • formulários e lotes de entradas "formulário de teste E2E iônico"
  • wkwebview para ios ** novo
  • RTL

aqui está um pouco da minha demonstração



link do repo: https://github.com/Khalid-Nowaf/ionic-keyboard

tudo que você precisa fazer após clonar o repo
sh ionic cordova run ios --prod ionic cordova run android --prod

7047

Seria uma ideia incluir o campo de entrada real nativamente como uma opção para o teclado? Assim, não dependeríamos de a renderização do DOM não ser rápida o suficiente, e ter o stick de entrada no teclado seria mais fácil de implementar.

O velho ditado "quando você tem um martelo, tudo parece um prego" vem à mente; então, talvez precisemos abordar a coisa toda de forma diferente.

@larssn é isso que o plugin de teclado pago faz. Portanto, parece uma boa opção.

@jrmcdona Pode estar ok, sim. Embora prefira ter uma solução interna que funcione 100%. No passado, tornei-me dependente de vários plug-ins que não funcionavam, e mantê-los era um pequeno pesadelo.

@larssn não estava sugerindo o uso do plugin. Estava sugerindo que sua ideia para o ionic fazer esse design soa bem e é também o que o plugin faz.

Até que recebamos algum feedback da equipe iônica sobre os problemas atuais do teclado, - Se alguém quiser testar o plugin pago, criei um repositório aqui. No entanto, não consigo fazer o teclado aparecer inicialmente por algum motivo. Tenho que clicar em Alternar no canto superior direito para que apareça. Não consigo descobrir por que ele não aparecerá enquanto a página é carregada. Como a demonstração.

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

Uma solução que funcionou para mim:

  • Use input vez de ion-input

@SoldierCorp você quer dizer no ramo de teste iônico WkWebView fornecido? Ou UIWebView?

@jrmcdona No modelo do componente, o próprio elemento html.

Considerando todos os comentários e expectativas sobre este assunto, porque não pensar em fornecer
um componente de chat dedicado, incluindo teclado e texto de entrada? É muito difícil criar um por desenvolvedores comuns e seria frustrante usar um plugin de terceiros, mesmo que pareça ser muito bom

Concordo com isso 100%. Se não for possível devido a certas complexidades que eles enfrentaram, isso também seria muito útil para todos nós sabermos.

@AmitMY @manucorporat Em relação ao ramo de teste WKWebView. Acredite que o teclado não deve fechar depois de clicar em enviar.
Exatamente como você veria durante uma conversa por SMS no iOS. Se o desenvolvedor não quiser esse comportamento, ele pode chamar o método de fechamento do teclado, mas por padrão deve permanecer aberto para que as pessoas possam tagarelar de mensagens durante um cenário de bate-papo sem que o teclado salte para cima e para baixo.

Qual é o status deste branch? Seria possível tornar visíveis as últimas notícias sobre o teclado? @AmitMY @manucorporat @ jgw96

@jrmcdona foi mesclado com o Sinta -se à vontade para fazer uma tentativa:
[email protected]

Ok! 👍🏼

@manucorporat Devo simplesmente instalar o npm [email protected] para obter essa compilação?
Tentei fazer isso, mas não deu certo. Não tenho certeza de como conseguir isso, exceto a construção que você quer que eu teste.

@jrmcdona execute npm v ionic-angular versions --json para ver quais versões foram publicadas

@jrmcdona

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

Ok, obrigado @manucorporat . Removi o branch de teste WKWebView e o adicionei de volta com o mais recente.
<plugin name="cordova-plugin-wkwebview-engine" spec="^1.1.3" />

Então eu atualizei o Angular para 4.1.3 para poder instalar todas as noites.

Parece que ainda não está pronto para o horário nobre. O branch de teste WKWebView se comportou melhor do que o que temos agora. Com esta versão, a caixa de entrada não aumenta. Apenas o teclado sem entrada. No ramo de teste, o teclado aumentaria, mas apenas um pouco atrasado. Não é ideal, mas compatível com o trabalho.

Alguém tem um repositório de teclado funcionando bem?

Este é um problema conhecido, há uma lista de problemas conhecidos?
Devo registrar novos problemas?

Aqui está um vídeo.
https://1drv.ms/v/s!AnyXOztVClZYbfswP -UEtaHEU0I

Aqui está o 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>

Obrigado a todos

@jrmcdona sim, ainda não foi lançado, estamos preparando um novo plugin de teclado:

  1. Atualize a 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

PLEASEE! deixe-me saber como funciona para você

@manucorporat
A versão 3.4 ainda não foi publicada.

Nightly e as outras versões publicadas recentemente estão falhando para mim como inválidas. Veja a imagem

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

@jrmcdona você tentou remover o node_module e executar o npm install novamente? certifique-se de usar --save em ionic-angular @ noturno.

No entanto, 3.4 será lançado hoje.

A IU do

Eu não tinha certeza de como importar o teclado para o aplicativo para brincar com os métodos Mostrar / Ocultar.
(ou seja, importar {Keyboard} de '@ ionic-native / keyboard';)

Parece que se você clicar no botão enviar, o teclado fecha automaticamente (não o estou fechando em código, pois não tenho o teclado importado para o aplicativo para usar os métodos Keyboard.Show etc.) Será possível manter o teclado aberto como funciona o iOS SMS?

Aqui está uma gravação.
https://1drv.ms/v/s!AnyXOztVClZYcY3vYXiXYaAZNdE

Quer saber se você já brincou com a inclusão da entrada com o próprio plugin de teclado e o estilizou de acordo com o tipo de dispositivo?

Bom trabalho Manu!

@manucorporat de fato grandes melhorias, você poderia adicionar uma opção para enviar o conteúdo (exceto cabeçalho) para que possamos ver as últimas mensagens quando o teclado estiver aberto e o texto de entrada for corrigido na parte inferior?

Quais plug-ins eu preciso instalar para que o teclado funcione?

@aspidvip Manu menciona isso alguns posts atrás. Vou copiar aqui.

Atualize a CLI:
npm install -g ionic
Certifique-se de usar a estrutura iônica todas as noites ou 3.4

Certifique-se de que está usando o plugin WK mais recente

Remova o plugin do teclado iônico: PASSO SUPER IMPORTANTE !!!!

Instale o novo plugin de teclado:

Plug-in cordova iônico adicionar https://github.com/ionic-team/cordova-plugin-keyboard --save

E como acessar um novo teclado de plugin?

É bom se o teclado for adicionado como um filho no div: ~

~ Por exemplo, o trabalho do plugin google maps

Como está o andamento do trabalho com o teclado?

Trabalho fantástico @manucorporat . Acabei de atualizar do 3.2 para o 3.5 todas as noites (@ 3.5.3-201707261447) e parece funcionar conforme o esperado na maioria dos formulários que tenho em meu aplicativo.

Agora só precisamos publicar uma demonstração do aplicativo mostrando tudo isso funcionando. Se houver interesse, posso tentar contribuir no fim de semana.

Obrigado por todo o trabalho colocado neste @manucorporat! (E todos os que o testaram também).

@ Peege151 Estou definitivamente interessado em uma demonstração de aplicativo disso. Estou chegando ao ponto de incorporar um teclado em meu aplicativo para bate-papo, então poderei fazer um teste completo quando estiver pronto e relatar aqui.

@ Peege151 Adoraria ver uma demonstração do aplicativo!

Ok, isso pode ser um choque, mas ainda estou no Ionic 2.2.1 e não posso atualizar para o mais recente porque acho que vai introduzir novos bugs que não posso ter no momento.
Este https://github.com/driftyco/cordova-plugin-wkwebview-engine.git#keyboard -fixes parece funcionar, mas temo que ainda travará o aplicativo no iOS com o erro "Mais tarefas executadas do que foram programadas" .

Posso usar https://github.com/driftyco/cordova-plugin-wkwebview-engine.git ainda com o Ionic 2.2.1? Qualquer chance?

Então tentei a última versão deste plugin 1.1.3 com Ionic 2.2.1, segui as instruções no repositório github, adicionei o código abaixo e removi o ionic-plugin-keyboard (presumi que era isso que @manucorporat queria dizer em seu comentário) - fiz a instalação do npm para o plugin, construí o aplicativo e testei.
No simulador iOS com iOS versão 10+ e funcionou bem como esperado, sem problemas e sem travamentos. Eu ainda tenho que tentar em um telefone real (anteriormente, meu aplicativo travava ao usar a solução aqui https://stackoverflow.com/questions/36706398/in-ionic-2-how-to-float-an-element-above- the-keyboard-when-the-keyboard-shows / 36804830 # 36804830)
Uma dica para o teclado desaparecer, adicione isso ao botão
(mousedown)="$event.preventDefault()"

O config.xml incluído

<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/*"/>

Tenho três perguntas, se alguém puder ajudar:
1- As coisas continuarão funcionando normalmente no Android após a remoção do teclado do plugin iônico?
2- Este <allow-navigation href="http://localhost:8080/*"/> correto? com localhost: 8080 ?
3- Devo remover este código abaixo do config.xml

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

Se o seu problema for no Android, o thiw irá ajudá-lo. No config.xml ionic, adicione as seguintes linhas na tag 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>

Isso evitará que o teclado empurre tudo e simplesmente sobreponha o teclado ao conteúdo. Portanto, o comportamento será o mesmo ou semelhante ao do teclado ios

@Jatapiaro Não funciona muito bem quando você tem uma entrada na parte inferior da tela, o teclado irá ocultá-la e você não poderá ver o que está digitando.

Eu realmente não acho que o Ionic seja o melhor lugar para um aplicativo de bate-papo. Eu nunca consegui acertar e acredito que tem sido uma luta por alguns anos com todas as postagens e comentários. Apenas minha opinião pessoal. Se houvesse um exemplo de aplicativo de bate-papo funcional para ios em iOS e Android, isso poderia realmente ajudar as pessoas.

Sim, na verdade, pagamos por isso e foi muito bom! Esse seria o melhor caminho para quem pode pagar. Pelo menos em minha experiência.

Em algum lugar no plug-in de teclado EddyVerbruggen, Max Lynch havia mencionado fazer esse plug-in parte do pacote de bate-papo Ionic. Eu perguntei sobre isso naquele tópico e também twittei para ele. Não recebi resposta Não tenho certeza do que se tratava o pacote de bate-papo. Já faz um tempo que não prestei atenção, então talvez haja uma atualização sobre isso ...

Se bem me lembro, vi em algum lugar no twitter, há uma semana, que o Ionic está trabalhando em uma atualização / novo plugin de teclado ... se não estou errado, mantenha a calma, espere e veja

Olá, tenho um projeto IONIC v1 e descobri que o botão de retorno às vezes é inválido. Isso me incomodou por muito tempo, preciso de ajuda, obrigado

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

@astec Você é chinês much muito obrigado

o teclado tem problemas com a barra de texto ion

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

estou usando a lista do cartão acima com css abaixo
.relativo{
posição: relativo ! importante;
}
.absoluto{
posição: absoluto ! importante;
}
.bottom0 {
inferior: 0;
}

quando clico em textarea, ele abre o teclado, mas não rola para o elemento, mas quando digito algo, ele rola para a textarea.

Eu observei que o problema só existe se usarmos posição relativa para qualquer pai de ion-textarea.

alguma solução de workaroud com posição relativa?

Ei pessoal!
alguém encontrou uma solução para isso.
sua ajuda é apreciada.

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

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

pacotes globais:

cordova (Cordova CLI) : 8.0.0

pacotes locais:

@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

Variáveis ​​ambientais:

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

Diversos:

backend : legacy`

adicione ao seu botão de clique (mousedown)="$event.preventDefault(); yourFunction()"

Alguma novidade?

Acho que você vai querer esperar e usar Avocado @mladilav

Temos tido um problema com nosso teclado iOS em entradas de íons, em resumo, a entrada não terá um acento circunflexo sendo renderizado após o teclado ser ativado, o usuário pode digitar corretamente no campo. Eu tentei uma variedade de diferentes versões iônicas, controle de versão de webview, etc, tudo sem sucesso. Eu acredito que é um problema para o qual se a entrada de íons precisar ser rolada, haverá problemas; se a entrada de íons estiver no topo da página, não parece haver o problema.

No entanto, descobri uma coisa que resolveu completamente nosso problema: construí esse aplicativo no Xcode 8.3.3. Todas as compilações anteriores que eu estava tentando estavam usando o Xcode 9.0 para a versão mais recente do Xcode 9.3 que saiu alguns dias atrás. O problema com essa correção é que acredito que a Apple pode descartar o formulário de aplicativos que está sendo enviado pelo Xcode 8 em um futuro próximo. Alguém tem outras ideias?

Para rolagem de pb, escrevi um hack aqui: https://github.com/ionic-team/ionic/issues/10629#issuecomment -395084125

Obrigado pelo problema! Movemos o código-fonte e os problemas do Ionic 3 para um repositório separado. Estou movendo este problema para o repositório do Ionic 3. Acompanhe esse problema lá.

Obrigado por usar o Ionic!

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

brandyscarney picture brandyscarney  ·  3Comentários

fdnhkj picture fdnhkj  ·  3Comentários

vswarte picture vswarte  ·  3Comentários

MrBokeh picture MrBokeh  ·  3Comentários

SebastianGiro picture SebastianGiro  ·  3Comentários