Ionic-framework: problema (formulários): entrada, rolagem, problemas de teclado para formulários

@dylanvdmerwe Isso é ótimo, obrigado por colocar isso junto! Quanto ao uso dos botões próximo e anterior para alternar as entradas para cima e para baixo, isso deve estar funcionando, mas talvez algo tenha quebrado recentemente.

Também vai para preenchimento automático e correção automática; por padrão, eles são desativados, a menos que sejam especificamente adicionados ao elemento: https://github.com/driftyco/ionic/blob/2.0/ionic/components/input/input-base.ts # L217

Você acha que a capitalização automática também deve ser desativada por padrão?

@adamdbradley

• Não consigo fazer com que os botões do teclado no iOS alternem entre as várias entradas. Eles ficam "confusos" e o teclado eventualmente fecha. Ainda preciso testar no Android quando testo com outros teclados que possuem esses botões.
• Não tenho certeza do que é melhor para os padrões de preenchimento automático e correção automática. No iOS, para certos tipos de teclado, eles são ativados por padrão - mas acho que é melhor seguir as regras <input> padrão?
• Vou testar algumas permutações para preenchimento automático e capitalização automática um pouco mais tarde. Nota Eu registrei isso separadamente aqui quando o plug-in do teclado foi alterado.

Observe que estou testando isso em dispositivos reais.

@adamdbradley Eu atualizei os itens acima. Coisas pendentes são questões definitivamente reproduzíveis.

Onde estamos no problema nº 1 do Android? Está bagunçando totalmente meu aplicativo sem ele.

+1 na edição nº 1 do Android :)

Alguma movimentação nos itens listados nesta edição?

@dylanvdmerwe assim que o próximo beta for lançado (beta8), nos concentraremos em corrigir problemas como este. Desculpe os inconvenientes

+1 na edição nº 1 do Android :)

+1 no problema do Android:

. Ao selecionar uma entrada, todo o conteúdo do formulário deve ser rolado para que o item selecionado fique visível após o teclado ser exibido.

Isso está me impedindo de transferir totalmente de iônico 1 para iônico 2.
Tudo de bom!

Isso está me impedindo de transferir totalmente de iônico 1 para iônico 2.

Mesmo aqui.

+1 na edição nº 1 do Android
Corrija isso o mais rápido possível! Começamos um novo aplicativo para isso, mas não queremos que esse bug seja um obstáculo e nos faça voltar ao ionic 1!

@adamdbradley , @ jgw96 Existe alguma solução alternativa por enquanto?

Você pode dar uma atualização? Difícil de demonstrar com esta funcionalidade primária não funcionando ...
Obrigado!

Eu gostaria de receber uma atualização sobre isso também. Nossos elementos ion-input não são exibidos ao serem focalizados. Tentamos mudar para elementos input normais, mas isso causa todos os outros tipos de problemas. Obrigado!

Olá a todos! Posso garantir que estamos trabalhando muito em questões como essa. Vocês estão vendo esse problema principalmente no iOS ou no Android? Ou isso acontece em ambos?

Acontece no Android, não tenho certeza sobre o iOS. Agora, apenas quando eu começo a digitar, a IU rola para cima para mostrar a entrada. O ideal é que isso aconteça assim que o foco e o teclado aparecerem.

Oi,

Estou vendo vários outros problemas no iOS no dispositivo (não verifiquei no Android):

• Com rótulos flutuantes, ao clicar em uma entrada geralmente exibe temporariamente uma linha vazia antes do valor, fazendo com que o valor pule para baixo e a entrada se expanda verticalmente. Com rótulos normais, o valor às vezes é temporariamente deslocado horizontalmente.
• Com rótulos flutuantes, o acento circunflexo salta fora da entrada ao rolar.
• Ao usar o plugin de teclado cordova e usar a barra de acessórios para navegar entre os campos, às vezes a visão inteira salta. Depois de definir disableScroll (true), o próximo botão funciona bem, mas o botão Voltar ainda faz a tela pular. Não tem certeza se isso deve ser relatado lá?

Obrigado pelo bom trabalho no Ionic, estou ansioso para ter todas as torções resolvidas!

O mesmo problema com teclado e entrada de íons no Android. Questão muito importante em todos os aplicativos com formulários!

Nenhuma atualização sobre este problema crítico?

alguma atualização sobre este problema?

Adoraria que isso fosse analisado em um próximo RC.

Atualize sobre isso. # 5 para iOS não consigo reproduzir. Isso está funcionando bem para mim no master, alguém pode confirmar?

Olhando para o # 1 agora.

Estou enfrentando o mesmo problema. Há alguma atualização no mesmo? .

No iOS # 1 não está funcionando muito bem em telas grandes (iPad). A entrada é rolada para o topo, mas seria legal tê-la mais perto do teclado.

Oi,

Demorei a investigar o problema, visto que ocorria em vários dispositivos do nosso lado.

Android:

• Parece bom ao habilitar scrollAssist
• Ainda há algum bug ao alternar de uma entrada de íon para outra quando o teclado já está aberto (página rolar muito para cima).

iOS:

• Na primeira vez, a página não rola
• Na segunda vez, em qualquer entrada da página, a página rola para cima com precisão
• Da mesma forma que no Android, ao alternar entre os campos, a página rola muito.

Depois de alguma pesquisa, descobrimos que scroolView.scrollTo usa a propriedade HTML scrollTop.
Esta propriedade é limitada pelo valor teórico: scrollHeight - clientHeight.

Acabamos de adicionar as seguintes linhas em scroll-view.js (node_modules / ionic-angular / util /):
console.log (deY + '=>' + y);
console.log ('valor teórico máximo:' + (this._el.scrollHeight - this._el.clientHeight));
E o problema parece óbvio.

Por alguns motivos, quando você foca o campo no Android, o teclado é gerado antes de rolar para cima, então o valor teórico máximo é superior ao valor que queremos rolar para cima. No iOS, na primeira vez, não é o caso. Portanto, o valor máximo de rolagem para cima é um.

Sua vez ;)

@EDumdum Como faço para replicar esse problema? Quando eu coloco o foco em uma entrada e o teclado já está ativado e mudo para a próxima entrada, a próxima entrada rola abaixo do cabeçalho. Não faz isso por você?

Ainda há algum bug ao alternar de uma entrada de íon para outra quando o teclado já está aberto (página rolar muito para cima).

Oi @adamdbradley

Etapa para criar o exemplo abaixo. As capturas de tela são do emulador, mas reproduzimos o mesmo comportamento nos dispositivos. O formulário está aqui para adicionar alguma cor (azul = campo em foco, vermelho = outro campo).

Etapa para reproduzir

• Campo de foco 2
  https://drive.google.com/open?id=0B6y5VVmSy-NVZ2xZdjFORzctZFE
  Está tudo bem :)
• Campo de foco 1
  https://drive.google.com/open?id=0B6y5VVmSy-NVT0ZpUmd6RllPeHM
  Deve rolar para baixo em vez de rolar mais para cima :(
• Campo de foco 2
  https://drive.google.com/open?id=0B6y5VVmSy-NVcExibnA5bUJTWUk
  Droga...

Passo para criar exemplo

• Criado um novo projeto (início iônico -v2 myApp) => RC2
• Adicionado scrollAssist no construtor do meu aplicativo
  constructor(config: Config, platform: Platform) { config.set('scrollAssist', true); ... }
• Modifiquei meu home.html e home.ts e um pequeno acréscimo ao .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; }

nightly build moves eles inserem os campos corretamente, mas em alguns lugares quando você pressiona o botão Voltar e o teclado desliza para baixo, as entradas permanecem onde estão (deslizam para cima) e deveriam ter voltado para o lugar original.
Em segundo lugar, não consigo digitar no emulador, pois ele está me forçando a digitar no teclado da tela e o emu não está exibindo isso.

@kodeine

Muito obrigado pelo feedback! Usarei todas essas notas para vários cenários de teste. Vou tentar sair todas as noites em breve para que todos possam testá-lo, obrigado!

@adamdbradley
outro cenário, eu estava em uma página onde eu tinha entradas e o teclado estava aberto, eu cliquei no botão Voltar e notei que as guias estavam na parte superior do teclado também. então talvez precisemos manter as guias atrás do teclado.

Relacionado: https://github.com/driftyco/ionic/commit/c4cf9df387da3524d80660fb69037de77553feea

Funciona melhor à noite!

No entanto, encontrei um bug introduzido pelas mudanças recentes. Se a entrada A tiver foco e você tocar na entrada B, o teclado ficará oculto e nenhuma das entradas terá foco.

Além disso, ao focar uma entrada, ele "salta" para a posição, em vez de uma animação de rolagem suave como quando você focaliza uma entrada no Safari, por exemplo, é isso que se pretende?

EDIT: Isso está usando WKWebView. Não testei o UIWebView.

Estou realmente interessado em saber se haverá suporte para o botão "próximo" para entradas.
É bastante difícil para o usuário (android, não tenho certeza para ios) não pressionar o botão enviar / ok pensando que iria para a próxima entrada em vez de terminar a ação do formulário.

@biesbjerg Você pode descrever mais como recriar esses problemas? Quando você diz que ele salta para a posição, o cabeçalho é rolado para longe? Qual tipo de entrada? A entrada está na parte superior do aplicativo ou perto da parte inferior? Você pode fornecer um vídeo do problema? Obrigado

@adamdbradley este vídeo mostra o "salto para a posição em vez de uma rolagem suave" e também mostra um bug que percebi, que se você focar em uma entrada e pressionar o botão de hardware de volta, não rola o conteúdo para trás.
editar: mudou o tamanho do GIF.

@adamdbradley Este é o problema de foco de entrada, onde o teclado desaparece em vez de focar a entrada tocada.

E isso é no Android, onde em foco, meu formulário dá um salto repentino, e a primeira entrada em foco não é visível na tela:

Olá @biesbjerg ! Lançamos outra noite recentemente que incluía mais algumas correções para rolagem de entrada, você se importaria de tentar? Obrigado!

@ jgw96 Olá! Testei 2.0.0-rc.3-201611302233 e nada mudou, então as gravações GIF ainda são problemas válidos.

Obrigado por testar @biesbjerg ! Você poderia postar um repo ou criar um plunkr que eu possa usar para reproduzir este problema?

@ jgw96 Aqui está! https://github.com/biesbjerg/6228-ionic-keyboard-issues

Passos:

1. git clone https://github.com/biesbjerg/6228-ionic-keyboard-issues.git
2. cd 6228-ionic-keyboard-issues
3. npm install
4. mkdir www (necessário devido a um bug cordova / iônico em que www precisa existir ou a instalação do plug-in falhará)
5. ionic state reset
6. Executar em dispositivos

O problema mostrado no vídeo do iOS é um problema com UIWebView e também com WKWebView.

O problema do Android tem algo a ver com o meu conteúdo sendo centralizado verticalmente usando o flexbox, mas ele deve se comportar normalmente mesmo assim.

Olá @biesbjerg ! Obrigado pelo repo. Há mais algumas mudanças acontecendo com a rolagem hoje que podem corrigir esse problema. Vou atualizar este post com minhas descobertas após o teste.

Olá @ jgw96! Legal! :-)

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

Vejo que esta parte (bem, e outras partes) tem uma marca ao lado dela; isso significa que estará no próximo lançamento? Isso seria incrível para aplicativos de bate-papo que têm um botão Enviar em um <ion-footer> na parte superior do teclado! Então, o teclado nem sempre fechava depois de clicar no botão Enviar

Olá a todos. Eu também tenho o mesmo problema. E eu observo alguma coisa.
Quando as entradas não são selecionadas, temos este caso.

Mas quando o selecionamos, temos este

Como resultado, dei aquele passo ruim com! Importante

E funciona para mim como uma solução temporária.

Então ... as coisas ficam realmente complicadas quando você tem algo que usa posição: relativa.

Neste exemplo, o logotipo é o elemento com posição relativa, e se você pressionar na primeira entrada, fica assim:

Mas pressionar a segunda entrada também empurra o logotipo:

@ jgw96 alguma notícia sobre esse problema e sobre o RC.4?

Eu também espero ter novidades sobre esse assunto, meu cliente está colocando muita pressão 🙉

A boa notícia é que as entradas se comportam muito melhor nas últimas noites. Acho que muitas pessoas, inclusive eu como o criador original desse problema, ficarão felizes com as correções.

@yannbf , para ser justo, o Ionic 2 ainda é um software de pré-lançamento.

Eu entendo isso e acho muito razoável. Eu só estava esperando ter uma atualização para passá-lo adiante. Estou muito grato pelo que a equipe iônica fez.

De qualquer forma, como posso testar meu aplicativo atual com aquele noturno?

@yannbf npm install ionic-angular<strong i="6">@nightly</strong> --save
e não se esqueça de atualizar seu package.json para angular 2.2.1

Funciona muito melhor com o noturno! Obrigado rapazes

Olá a todos! Obrigado por usar o Ionic! @biesbjerg e @yannbf , vocês se importariam de atualizar para o rc4 e testar, por favor? Essa versão tem uma tonelada de correções de rolagem de entrada que, esperançosamente, devem corrigir os problemas de você. Obrigado!

@ jgw96 Sim, já fiz isso. É muito melhor! Ansioso pelo lançamento final 😄

@ jgw96 Depois de atualizar as coisas ficaram muito melhores, mas os elementos com position:absolute ou position:fixed ainda são afetados. Consegui contornar essa página com o logotipo que enviei uma impressão antes (com outra abordagem, removendo a posição absoluta), mas como na página seguinte, preciso ter "termos de acordo" no final da página, ainda estou enfrentando o problema :

Aqui está o código:

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

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

No meu caso, depois de atualizar para RC5, o problema de salto de entrada no Android permanece. Acabei de começar um novo projeto com o modelo em branco e copiei o componente de entrada de íons da documentação para o conteúdo de íons, o comportamento abaixo.

Como você pode ver, cada componente salta, exceto o primeiro.
Para registro, esta é a saída do comando ionic info .

Cordova CLI: 6.4.0
Versão do Ionic Framework: 2.0.0-rc.5
Versão Ionic CLI: 2.2.1
Versão Ionic App Lib: 2.2.0
Versão dos scripts do aplicativo Ionic: 1.0.0
versão ios-deploy: não instalado
versão ios-sim: não instalado
SO: Windows 10
Versão do nó: v6.9.2
Versão do Xcode: não instalada

@ almr193 esse comportamento parece correto. A tela rola conforme um teclado ficará visível em dispositivos móveis. A rolagem garante que a entrada destacada esteja sempre visível e não seja coberta pelo teclado na tela.

@dylanvdmerwe Obrigado pela resposta rápida, o cenário que apresentei parece correto e eu entendo que a tela rola conforme o teclado se mostra na tela. No entanto, eu tenho outro cenário estranho com um ion-input dentro de um ion-list com reordenamento de item habilitado. A entrada salta fora dos limites e o usuário não pode ver o que está sendo escrito.

@ almr193 sim, este ainda é um problema sem solução, infelizmente.
Veja os itens 1) e 4) do Android da postagem inicial acima.

+1 Ainda não resolvido. Quaisquer métodos de teclado nativos iônicos não parecem ajudar no Android

Eu tenho um problema com o uso de slides + entradas. Ele mostra um comportamento muito estranho por não executar nenhuma rolagem.

+1

Cordova CLI: 6.4.0
Versão do Ionic Framework: 2.0.0
Versão Ionic CLI: 2.1.18
Versão Ionic App Lib: 2.1.9
Versão dos scripts do aplicativo Ionic: 1.0.0
versão ios-deploy: não instalado
versão ios-sim: 5.0.13
SO: macOS Sierra
Versão do nó: v6.9.4
Versão do Xcode: Xcode 8.2.1 Versão da compilação 8C1002

+1

Este ainda é um problema com o mais recente e melhor cordova e iônico.

Existe uma solução ou solução alternativa?

-- Atualizada --

Quando você começa a digitar, a entrada é exibida na tela, mas quando o teclado é inicialmente exibido, a entrada é obscurecida pelo 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

Tela inicial

Tela após selecionar o elemento de entrada do domínio

Caro time iônico ( @manucorporat , @brandyscarney , @adamdbradley )
Eu sei que você está trabalhando muito na próxima versão, mas esses problemas de teclado são muito importantes para a experiência do aplicativo. Por favor, considere dar a eles um alto prio, junto com outros problemas antigos, como rolagem virtual.
O tamanho enorme do aplicativo e a inicialização lenta são uma droga, ok, mas quando o aplicativo está instalado e em execução, ele deve fornecer uma experiência adequada em coisas básicas como manuseio do teclado.

Tenho que gritar aqui,

• # 9633
• # 9518
• # 9514
• # 8607

Eles aparentemente foram deixados para apodrecer, enquanto a equipe adiciona recursos reconhecidamente interessantes, como o painel dividido recentemente.

O problema é que realmente não adianta adicionar novos recursos se os principais ainda estão corrompidos de alguma forma óbvia. É indiscutivelmente mais importante acertar as coisas fundamentais antes de adicionar à estrutura.

Amando todo o trabalho duro, mas as prioridades parecem estar erradas aqui.

Pessoal, a melhor maneira de priorizar e consertar as coisas é fornecer um _código reproduzível_ que a equipe do Ionic pode testar e encontrar os problemas. Capturas de tela e GIFs são épicos, mas o código que eles podem usar para ver seus problemas é o melhor. # 2 centavos

Observe que com formulários e entradas, não use display: absolute para posicionar coisas.

Eu também estou tendo esses problemas. Este não é um problema trivial. Como isso tem sido um problema há um ano, aparentemente sem solução?

Estou tendo um problema quando um campo de entrada está focado, a tela sobe e desce sempre que clico no campo. Alguém pode me ajudar, por favor?

Versão da estrutura Ionic: 2.3.0
Versão Ionic CLI: 2.2.2
Versão Ionic App Lib: 2.2.1
Versão dos scripts do aplicativo Ionic: 1.1.4
versão ios-deploy: 1.9.1
versão ios-sim: 5.0.4
SO: macOS Sierra
Versão do nó: v7.2.0
Versão do Xcode: Xcode 8.2.1 Versão da compilação 8C1002

@pedrodurek seria ótimo se você fornecesse um êmbolo para que os caras da ionic pudessem reproduzir.

Eu encontrei uma solução temporária para o problema de saltos de texto. Esta NÃO é uma correção, mas essencialmente um hack até que uma correção melhor seja implementada.

Primeiro, certifique-se de ter estes conjuntos:

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

a seguir, em seu app.module.ts, encontre o seguinte:

IonicModule.forRoot(YourApp)

e torná-lo assim:

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

Isso corrige qualquer problema de salto que eu tenha, mas infelizmente tem o efeito de empurrar a barra de navegação para fora da tela quando um usuário está digitando. No entanto, este parece ser o único efeito colateral doentio que notei.

@ Tyler-Darby Obrigado por compartilhar sua solução, não é a melhor solução, mas é razoável e funcionou para mim.

Eu estava tendo esse problema e ele estava me deixando maluco, mas finalmente descobri que era causado pela aplicação de transform: translate3d(0,0,0) a elementos para forçar a aceleração de hardware. Acontece que isso quebra o foco de entrada quando o teclado é ativado.

Tenho certeza de que essa não é a causa do problema de todos, mas espero que possa ajudar alguém.

Eu tenho várias plataformas e estava consertando isso ..

Eu coloquei 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' )
               ...

Talvez seja útil para alguém.
Obrigado pessoal pelas dicas;)

Confira o vídeo:
https://www.dropbox.com/s/6p49z0chle9g1b9/git-ios-input.mov?dl=0

Informação do ambiente:
pacotes globais:

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

pacotes locais:

@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

Usei <input/> como <ion-input></ion-input>
Experimente com isso.

Olá @maulikakapure ,

Estou iniciando meu primeiro aplicativo iônico para minha empresa e também tenho o problema de rolagem / foco com o teclado. Obviamente você encontrou uma solução que você mostrou em seu vídeo. Você poderia fornecer o código-fonte? Eu ainda não encontrei a combinação certa de soluções alternativas, parâmetros de configuração e tags html para usar.

Obrigado

@ Tyler-Darby Ei Tyler, onde coloco o código a seguir?

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

Oi @cwiejack

Verifique uma demonstração simples aqui: https://www.dropbox.com/s/1o9hrnjgt7u3bpy/BasicDemo.zip?dl=0

Obrigado.

Para corrigir os problemas de palavra-chave padrão com Ionic, basta colocar o seguinte nas importações de seu app.module.ts:

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

Isso vai resolver os problemas do teclado imediatamente.

@aplimovil isso resolveu o problema no meu aplicativo Android! muitas saudações para você bom homem!

De que adianta ter scrollAssist & autoFocusAssist se configurá-los para true torna os aplicativos inutilizáveis?

Há casos em que habilitá-los traria algumas vantagens?

A correção de aplimovil parece ter resolvido todos os problemas que eu estava tendo!

Então, sim, eu estaria interessado em saber por que você definiu qualquer uma dessas coisas como verdade.

@JefferE É porque os recursos scrollAssist e autoFocusAssist do Ionic estão quebrados no iOS (no Android eles quase funcionam bem, embora as melhorias passem praticamente despercebidas, pelo menos para mim) e não parecem ter notado todos os relatórios de problemas aqui o suficiente para que possam corrigi-los em um próximo lançamento. Esperançosamente, algum dia eles notarão este tópico e consertarão esses recursos para sempre no iOS ou os desligarão seletivamente por padrão por enquanto no iOS.

quando ion-textarea na grade, keyboard.disablescroll (false) não funciona? como fazer com o problema

Isso funcionou para mim

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

    }),

Informação 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 

Só queria que vocês soubessem que tenho um problema semelhante no iOS que é que o teclado rola sobre os campos de entrada e a tela de conteúdo não é atualizada para liberar espaço para o teclado.

a parte importante que descobri é que ao usar plug-ins (como @ ionic-native / keyboard)
e fazer coisas em sua interface no momento em que o teclado mostra this.keyboard.onKeyboardShow().subscribe(()=>{ this.someFlag=true}) e usar a bandeira na interface para mudar algo. ele não mudará , você mesmo terá que acionar a detecção de mudança angular importando ChangeDetectorRef e usando sua função detectChanges() em subscribe .

Criei este gitrepo para mostrar o caso. Sinta-se à vontade para dar uma olhada. Isso foi uma grande surpresa para mim, pois não percebi que há casos em que você subscribe(()=>{}) em algo, faz alterações, mas não aparece na interface.

tornou-se um pouco mais sábio hoje :)

última coisa: tenham um ótimo final de semana a todos!

É desconcertante para mim que esse problema tenha mais de 1,5 anos e nenhuma ação tenha sido tomada. Isso está arruinando completamente o fluxo do meu aplicativo. Faz com que pareça com erros e de baixa qualidade, e estamos tendo que realizar hacks para fazer as coisas parecerem boas. @mhartington, há algo acontecendo internamente aqui?

Tive uma conversa por telefone com @matthewkremer da Ionic como uma continuação do uso da versão PRO do ionic agora, e pressionei que este é um problema importante. Ele disse que entendeu e tentaria levar isso a uma prioridade mais alta.

O mesmo para mim. Isso não parece nada bom ..

Olá a todos, isso está se tornando uma prioridade para nós, veja o tweet de @adamdbradley esta manhã: https://twitter.com/adamdbradley/status/916295747968040960

Espere atualizações nos próximos dias / semanas

Parece bom, espero que possamos ter a vida de volta em breve, sem aplicar hacks desnecessários.

Para quem já usa WK, estou preparando um novo plugin de teclado: cordova-plugin-ionic-wkkeyboard :

1. Primeiro desinstale o teclado de plug-in iônico

cordova plugin rm ionic-keyboard-plugin --save

1. Instale o novo plugin:

cordova plugin add cordova-plugin-ionic-wkkeyboard --save

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

Há um problema estranho com este novo wkkeyboard e desabilitando / habilitando ion-textarea com FormGroups e FormControls. Depois de reativar o formulário completo, a área de texto de íons permanece desativada. Isso não acontece ao usar o teclado 'antigo'.

Vou criar um problema esta noite :).

// Editar:
Provavelmente é um problema relacionado a outra coisa. Mesmo comportamento no navegador.
https://github.com/ionic-team/ionic/issues/13170

O que devo procurar se o teclado simplesmente não acionar um redimensionamento, muito menos uma rolagem para inserir?

Parece que o problema de rolagem já deve ser resolvido, mas ainda estou tendo problemas no ios em que quando a entrada está no meio da tela, a entrada não é rolada quando o teclado está ativo. Este é um problema quando a entrada é tocada ou quando uso as teclas de navegação do teclado. Estou esquecendo de algo? Tentei várias das soluções apresentadas aqui, mas elas não parecem estar funcionando. (para obter informações adicionais, estou usando o Ionic no navegador, não como um aplicativo nativo)

uau 2018 e nada.

eles me deram essa solução, mas não é totalmente perfeita

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

Oi pessoal, eu acidentalmente descobri que a compilação padrão tem _cordova-plugin-ionic-keyboard_. E quando eu o substituí por _ionic-plugin-keyboard_, os bugs de entrada desapareceram.

Então, minha solução é:
plugin cordova rm teclado iônico
Plug-in cordova iônico adicionar teclado-plugin-iônico
npm install --save @ ionic-native / keyboard

+1

Vendettall, tentei fazer isso, mas não funcionou!

Você tem esse bug irritante com a barra de ferramentas de cabeçalhos?

Em quinta-feira, 29 de março de 2018 às 23h31, Emmanuel Fache [email protected]
escreveu:

Vendettall, tentei fazer isso, mas não funcionou!

-
Você está recebendo isto porque comentou.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/ionic-team/ionic/issues/6228#issuecomment-377362762 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/AYPMdggjRqZBZ0wghtxFjVbPLViBkR8hks5tjUSQgaJpZM4IKhUp
.

Se você ainda tiver esse problema, tente o plug-in de teclado iônico mais recente

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

Então defina

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

No config.xml

Oi,
No aplicativo que estou trabalhando está tudo funcionando bem. Mas, por algum motivo, tenho que usar as entradas da tabela html. Neste caso, sempre que estou clicando em input ele redesenha a tabela, e reinicia a rolagem da tabela.
Alguém pode ajudar aqui?

também vendo o problema de transformação acontecendo. É muito chato.

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

Este comentário acima AbrahamLopez10 comentado em 1 de agosto de 2017 funcionou perfeitamente para mim, rolando os campos de entrada para exibição quando o teclado do Android aparece.

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

Olá pessoal, acabei de criar uma diretiva personalizada para lidar com esse problema nas plataformas iOS e Android para aplicativos Ionic 2 e 3. Verifique se isso resolve todos os problemas relacionados a esse problema de rolagem.

Eu usei scroll-into-view-if-needed ponyfill para fazer esta diretiva

Instale a diretiva ion-input-scroll-into-view executando o comando npm install ion-input-scroll-into-view

Passo 1
Anexe a diretriz de entrada de íons rolar para a visualização à entrada de íons ou área de texto de íons conforme a seguir.

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

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

Passo 2

Você deve importar o IonInputScrollIntoViewModule no module.ts do seu componente pai da seguinte maneira

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

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

Obrigado pelo problema! Nós 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!

Problema movido para: https://github.com/ionic-team/ionic-v3/issues/47