Ionic-framework: masalah (formulir): Input, pengguliran, masalah keyboard untuk formulir

Dibuat pada 19 Apr 2016  ·  109Komentar  ·  Sumber: ionic-team/ionic-framework

Saat ini, cara Ionic menangani input form bisa lebih baik. Ionic 1 memiliki default yang mengagumkan untuk input formulir terkait dengan penanganan keyboard, pengguliran konten, dll. Ionic 2 perlu dibuat konsisten, dan yang lebih penting, berfungsi dengan baik untuk input formulir secara konsisten di semua platform (iOS, Android, Windows).

Lihat repo ini untuk contoh kode yang harus dijalankan pada perangkat: https://github.com/dylanvdmerwe/ionic2-formtest

Android:

  • [x] 1. Saat memilih input, seluruh konten formulir harus digulir sehingga item yang dipilih terlihat setelah keyboard ditampilkan.
  • [x] 2. Saat keyboard disembunyikan, atur pengguliran kembali ke posisi semula dan hapus bantalan tambahan.
  • [x] 3. Menyentuh area yang bukan merupakan input akan menutup keyboard.
  • [ ] 4. Jika pengguna memilih input kedua setelah mengisi input pertama, layar harus digulir untuk fokus pada kolom input yang baru dipilih.
  • [x] 5. Beberapa keyboard memiliki tombol berikutnya, sebelumnya, dan selesai.
  • [x] 6. Dukungan untuk koreksi otomatis, pelengkapan otomatis & kapitalisasi otomatis dan kombinasinya.

    iOS:

  • [x] 1. Saat memilih input, seluruh konten formulir harus digulir sehingga item yang dipilih terlihat setelah keyboard ditampilkan.

  • [x] 2. Saat keyboard disembunyikan, atur pengguliran kembali ke posisi semula dan hapus bantalan tambahan.
  • [x] 3. Menyentuh area yang bukan merupakan input akan menutup keyboard.
  • [x] 4. Jika pengguna memilih input kedua setelah mengisi input pertama, layar harus digulir untuk fokus pada kolom input yang baru dipilih.
  • [ ] 5. Beberapa keyboard memiliki tombol berikutnya, sebelumnya, dan selesai. Ini harus dihubungkan ke input formulir pada halaman untuk memungkinkan pengguna menggilir opsi input.
  • [x] 6. Dukungan untuk koreksi otomatis, pelengkapan otomatis & kapitalisasi otomatis dan kombinasinya.

_Perhatikan bahwa masalah ini tidak ada hubungannya dengan formulir atau input dalam komponen slide . Itu akan menjadi pemeriksaan konsistensi terpisah untuk dilakukan._

Versi ionik yang mana? 2.x

Jalankan ionic info dari terminal/cmd Prompt: (rekatkan output di bawah)
Cordova CLI: 6.1.1
Versi Kerangka Ionik: 2.0.0-beta.4-201604170622
Versi CLI Ionik: 2.0.0-beta.24
Versi Lib Aplikasi Ionic: 2.0.0-beta.14
OS:
Versi Simpul: v5.7.0

v3

Komentar yang paling membantu

Tim ionik yang terhormat ( @manucorporat , @brandyscarney , @adamdbradley )
Saya tahu Anda bekerja keras pada versi berikutnya, tetapi masalah keyboard ini sangat penting untuk pengalaman aplikasi. Harap pertimbangkan untuk memberi mereka prio tinggi, bersama dengan masalah lama lainnya seperti gulir virtual.
Ukuran aplikasi yang besar dan startup yang lambat, oke, tetapi ketika aplikasi diinstal dan dijalankan, itu akan memberikan pengalaman yang tepat pada hal-hal dasar seperti penanganan keyboard.

Semua 109 komentar

@dylanvdmerwe Ini bagus, terima kasih telah menyatukan ini! Adapun menggunakan tombol berikutnya dan sebelumnya untuk tab atas dan bawah input, ini harus bekerja tapi mungkin ada sesuatu yang rusak baru-baru ini.

Juga berlaku untuk pelengkapan otomatis dan koreksi otomatis, secara default dinonaktifkan kecuali jika ditambahkan secara khusus ke elemen: https://github.com/driftyco/ionic/blob/2.0/ionic/components/input/input-base.ts #L217

Apakah menurut Anda kapitalisasi otomatis juga harus dinonaktifkan secara default?

@adamdbradley

  • Saya tidak bisa mendapatkan tombol keyboard di iOS untuk beralih di antara berbagai input. Mereka menjadi "bingung" dan keyboard akhirnya hanya menutup. Masih perlu menguji di Android ketika saya menguji dengan keyboard lain yang memiliki tombol ini.
  • Tidak yakin apa yang terbaik untuk default untuk pelengkapan otomatis dan koreksi otomatis. Di iOS untuk jenis keyboard tertentu mereka diaktifkan secara default - tetapi saya pikir yang terbaik adalah mengikuti aturan <input> ?
  • Saya akan menguji beberapa permutasi untuk pelengkapan otomatis dan kapitalisasi otomatis nanti. Catatan saya mencatat ini secara terpisah di sini ketika plugin keyboard berubah.

Harap dicatat saya sedang menguji ini pada perangkat yang sebenarnya.

@adamdbradley saya telah memperbarui item di atas. Hal-hal yang luar biasa adalah masalah yang pasti dapat direproduksi.

Di mana kita di Android edisi #1? Ini benar-benar mengacaukan aplikasi saya tanpanya.

+1 pada edisi Android #1 :)

Adakah pergerakan pada item yang tercantum dalam edisi ini?

@dylanvdmerwe setelah beta berikutnya dirilis (beta8) kami akan fokus untuk memperbaiki masalah seperti ini. Maafkan ketidaknyamanannya

+1 pada edisi Android #1 :)

+1 pada masalah Android:

. Saat memilih input, seluruh konten formulir harus digulir sehingga item yang dipilih terlihat setelah keyboard ditampilkan.

Ini mencegah saya melakukan porting sepenuhnya dari ionic1 ke ionic 2 .
Semua yang terbaik!

Ini mencegah saya melakukan porting sepenuhnya dari ionic1 ke ionic 2 .

Sama disini.

+1 pada edisi Android #1
Tolong perbaiki ini secepatnya! Kami memulai aplikasi baru tentang ini, tetapi tidak ingin bug ini menjadi pemecah kesepakatan dan membuat kami kembali ke ionic 1!

@adamdbradley , @jgw96 Apakah ada solusi untuk saat ini?

Bisakah Anda memberi pembaruan? Sulit untuk didemonstrasikan dengan fungsi utama ini tidak berfungsi ...
Terima kasih!

Saya akan menghargai pembaruan tentang ini juga. Elemen ion-input kami tidak di-scroll ke tampilan saat memfokuskannya. Kami mencoba beralih ke elemen input normal tetapi itu menyebabkan semua jenis masalah lainnya. Terima kasih!

Halo semua! Saya dapat meyakinkan Anda bahwa kami bekerja keras untuk masalah seperti ini. Apakah Anda semua terutama melihat masalah ini di ios atau android? Atau terjadi pada keduanya?

Terjadi di android, tidak yakin tentang ios. Saat ini, hanya sekali saya mulai mengetik, UI akan menggulir ke atas untuk menampilkan input. Idealnya, itu harus terjadi segera setelah fokus dan papan kunci muncul.

Hai,

Saya melihat beberapa masalah lagi di iOS pada perangkat (belum diperiksa di Android):

  • Dengan label mengambang, saat mengklik input, sering kali menampilkan baris kosong sebelum nilai untuk sementara, menyebabkan nilai melompat ke bawah dan input meluas secara vertikal. Dengan label normal, nilainya terkadang dipindahkan secara sementara secara horizontal.
  • Dengan label mengambang, tanda sisipan melompat ke luar input saat menggulir.
  • Saat menggunakan plugin keyboard cordova dan menggunakan bilah aksesori untuk menavigasi antar bidang, seluruh tampilan terkadang melompat. Setelah mengatur disableScroll(true), tombol berikutnya berfungsi dengan baik tetapi tombol kembali masih menyebabkan layar melompat. Tidak yakin apakah ini harus dilaporkan di sana?

Terima kasih atas kerja bagusnya di Ionic, berharap untuk menyelesaikan las kinks!

Masalah yang sama dengan keyboard dan input ion di Android. Masalah yang sangat penting pada semua aplikasi dengan formulir!

Tidak ada pembaruan tentang masalah kritis ini?

ada pembaruan tentang masalah ini?

Akan senang untuk melihat ini di RC yang akan datang.

Perbarui ini. #5 untuk iOS Saya tidak dapat mereproduksi. Itu berfungsi dengan baik untuk saya di master, dapatkah seseorang mengonfirmasi?

Melihat #1 sekarang.

Saya menghadapi masalah yang sama. Apakah ada pembaruan yang sama? .

Di iOS #1 tidak berfungsi dengan baik di layar besar (iPad). Input digulir ke bagian paling atas, sementara itu akan rapi untuk lebih dekat ke keyboard.

Hai,

Butuh beberapa waktu untuk menyelidiki masalah, seperti yang terjadi pada beberapa perangkat di pihak kami.

Android:

  • Terlihat bagus saat mengaktifkan scrollAssist
  • Masih ada beberapa bug saat berpindah dari satu input ion ke input ion lainnya saat keyboard sudah terbuka (halaman scroll ke atas).

iOS:

  • Pertama kali, halaman tidak bergulir
  • Kedua kalinya, pada input halaman apa pun, halaman menggulir ke atas secara akurat
  • Sama seperti untuk Android, saat beralih antar bidang, gulir halaman terlalu banyak.

Setelah beberapa pencarian, kami menemukan bahwa scroolView.scrollTo menggunakan properti HTML scrollTop.
Properti ini dibatasi oleh nilai teoretis: scrollHeight - clientHeight.

Kami baru saja menambahkan baris berikut ke scroll-view.js (node_modules/ionic-angular/util/):
console.log(dariY + ' =>' + y);
console.log('nilai teori maksimum: ' + (this._el.scrollHeight - this._el.clientHeight));
Dan masalahnya tampak jelas.

Untuk beberapa alasan, ketika Anda memfokuskan bidang di Android, keyboard dihasilkan sebelum menggulir ke atas, sehingga nilai teoritis maksimum lebih unggul dari nilai yang ingin kita gulir ke atas. Di iOS, untuk pertama kalinya, tidak demikian. Jadi nilai gulir ke atas maksimum adalah satu.

Giliranmu ;)

@EDumdum Bagaimana cara mereplikasi masalah ini? Ketika saya memiliki fokus pada input, dan keyboard sudah aktif, dan beralih ke input berikutnya, input berikutnya bergulir di bawah header. Apakah itu tidak melakukannya untuk Anda?

Masih ada beberapa bug saat berpindah dari satu input ion ke input ion lainnya saat keyboard sudah terbuka (halaman scroll ke atas).

Hai @adamdbradley

Langkah membuat contoh di bawah ini. Tangkapan layar berasal dari emulator, tetapi kami mereproduksi perilaku yang sama di perangkat. Formulir di sini untuk menambahkan beberapa warna (biru = bidang fokus, merah = bidang lain).

Langkah untuk mereproduksi

Langkah membuat contoh

  • Membuat proyek baru (ionic start -v2 myApp) => RC2
  • Menambahkan scrollAssist di konstruktor aplikasi saya
    constructor(config: Config, platform: Platform) { config.set('scrollAssist', true); ... }
  • Memodifikasi home.html & home.ts saya & sedikit menambahkan ke .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; }

gerakan nightly build mereka memasukkan bidang dengan benar, tetapi beberapa tempat ketika Anda menekan tombol kembali dan keyboard meluncur ke bawah, input tetap di tempatnya (geser ke atas) mereka seharusnya datang ke tempat aslinya.
Kedua, saya tidak dapat mengetik di emulator, karena memaksa saya mengetik di keyboard layar dan emu tidak menampilkannya.

@kodeine
image

Terima kasih banyak atas umpan baliknya! Saya akan menggunakan semua catatan ini untuk berbagai skenario pengujian. Saya akan mencoba untuk keluar malam segera sehingga semua orang dapat mengujinya, terima kasih!

@adamdbradley
skenario lain, saya berada di halaman di mana saya memiliki input dan keyboard terbuka, saya mengklik tombol kembali dan melihat tab juga berada di atas keyboard. jadi mungkin kita perlu menjaga tab di belakang keyboard.

Ini bekerja lebih baik di malam hari!

Saya menemukan bug yang diperkenalkan oleh perubahan terbaru. Jika input A memiliki fokus dan Anda mengetuk input B, keyboard akan disembunyikan dan tidak ada input yang memiliki fokus.

Juga, ketika memfokuskan input, itu "melompat" ke posisinya, alih-alih animasi gulir yang mulus seperti ketika Anda memfokuskan input di Safari misalnya, apakah itu dimaksudkan?

EDIT: Ini menggunakan wkWebView. Belum menguji UIWebView.

Saya sangat tertarik untuk mengetahui apakah akan ada dukungan untuk tombol "berikutnya" untuk input.
Agak sulit bagi pengguna (Android, tidak yakin untuk ios) untuk tidak menekan tombol kirim/ok berpikir itu akan masuk ke input berikutnya daripada menyelesaikan tindakan formulir.

@biesbjerg Bisakah Anda menjelaskan lebih lanjut cara membuat ulang masalah itu? Ketika Anda mengatakan itu melompat ke posisi, apakah tajuknya digulir? Jenis masukan yang mana? Apakah input di bagian atas aplikasi atau di dekat bagian bawah? Bisakah Anda memberikan video masalahnya? Terima kasih

@adamdbradley video ini menunjukkan "lompat ke posisi alih-alih gulir halus" dan juga menunjukkan bug yang saya perhatikan, bahwa jika Anda fokus pada input dan menekan tombol kembali perangkat keras, itu tidak menggulir konten kembali.
edit: mengubah ukuran gif.

ezgif com-cb02e8c895

@adamdbradley Ini adalah masalah fokus input, di mana keyboard menghilang daripada memfokuskan input yang disadap.

focus-keyboard

Dan ini di Android, di mana pada fokus, formulir saya tiba-tiba melompat, dan input fokus pertama tidak terlihat di layar:

keyboard-jump

Halo @biesbjerg ! Kami telah merilis nightly lain baru-baru ini yang menyertakan beberapa perbaikan lagi untuk pengguliran input, maukah Anda mencobanya? Terima kasih!

@jgw96 Hai! Saya menguji 2.0.0-rc.3-201611302233 dan tidak ada yang berubah, jadi rekaman gif masih valid.

Terima kasih telah menguji @biesbjerg ! Bisakah Anda memposting repo atau membuat plunkr yang dapat saya gunakan untuk mereproduksi masalah ini?

@jgw96 Ini dia! https://github.com/biesbjerg/6228-ionic-keyboard-issues

Langkah:

  1. git clone https://github.com/biesbjerg/6228-ionic-keyboard-issues.git
  2. cd 6228-ionic-keyboard-issues
  3. npm install
  4. mkdir www (Diperlukan karena bug cordova/ionic di mana www perlu ada atau instalasi plugin akan gagal)
  5. ionic state reset
  6. Jalankan di perangkat

Masalah seperti yang ditunjukkan pada video iOS adalah masalah dengan UIWebView serta WKWebView.

Masalah Android ada hubungannya dengan konten saya yang dipusatkan secara vertikal menggunakan flexbox, tetapi seharusnya berperilaku normal meskipun begitu imo.

Halo @biesbjerg ! Terima kasih atas reponya. Ada beberapa perubahan lagi yang terjadi dengan gulir hari ini yang dapat memperbaiki masalah ini, saya akan memperbarui posting ini dengan temuan saya setelah pengujian.

Hai @jgw96! Dingin! :-)

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

Saya melihat bagian ini (baik, dan bagian lain) memiliki tanda centang di sebelahnya; apakah ini berarti akan ada di rilis berikutnya? Ini akan luar biasa untuk aplikasi obrolan yang memiliki tombol Kirim di <ion-footer> di atas Keyboard! Maka Keyboard tidak akan selalu menutup setelah mengklik tombol Kirim

Halo semuanya. Saya juga memiliki masalah yang sama. Dan saya mengamati beberapa hal.
Ketika input tidak dipilih, kami memiliki kasus ini.

1jpg

Tetapi ketika kami memilihnya, kami memiliki yang ini

2

Akibatnya saya membuat langkah buruk itu dengan !penting

3

Dan itu berfungsi untuk saya sebagai solusi sementara.

Jadi.. hal-hal menjadi sangat berantakan ketika Anda memiliki sesuatu yang menggunakan position:relative.

Dalam contoh ini, logo adalah elemen dengan posisi relatif, dan jika Anda menekan input pertama akan menjadi seperti ini:
outro

Tetapi menekan input kedua juga mendorong logo:
photo569187513406696003

@jgw96 ada berita tentang masalah ini dan tentang RC.4 ?

Saya juga sangat berharap mendapat berita tentang masalah ini, klien saya memberikan banyak tekanan

Kabar baiknya adalah bahwa input berperilaku jauh lebih baik di nightlies terbaru. Saya pikir banyak orang, termasuk saya sebagai logger asli dari masalah ini, akan senang dengan perbaikannya.

@yannbf , agar adil Ionic 2 masih merupakan perangkat lunak

Saya mengerti itu dan menganggapnya sangat masuk akal. Saya hanya berharap ada pembaruan untuk menyebarkannya. Saya sangat berterima kasih atas apa yang telah dilakukan tim ionic.

Ngomong-ngomong, bagaimana cara menguji aplikasi saya saat ini dengan malam itu?

@yannbf npm install ionic-angular<strong i="6">@nightly</strong> --save
dan jangan lupa untuk memperbarui package.json Anda ke angular 2.2.1

Bekerja jauh lebih baik dengan nightly! Terima kasih teman-teman

Halo semua! Terima kasih telah menggunakan Ionic! @biesbjerg dan @yannbf , maukah kalian memperbarui ke rc4 dan mengujinya? Rilis itu memiliki banyak perbaikan pengguliran input yang diharapkan dapat memperbaiki masalah kalian. Terima kasih!

@jgw96 Ya, sudah melakukannya. Ini jauh lebih baik! Cemas untuk rilis final

@jgw96 Setelah memperbarui segalanya menjadi lebih baik, tetapi elemen dengan position:absolute atau position:fixed masih terpengaruh. Saya dapat berkeliling dari halaman itu dengan logo yang saya kirim sebelumnya (dengan pendekatan lain, menghapus posisi absolut), tetapi seperti pada halaman berikut saya harus memiliki "persyaratan perjanjian" di bagian bawah halaman, saya masih menghadapi masalah :

selection_002

Berikut kodenya:

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

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

Dalam kasus saya, setelah memperbarui ke RC5, masalah input melompat di Android tetap ada. Saya baru saja memulai proyek baru dengan template kosong dan saya menyalin komponen input ion dari dokumentasi ke konten ion, perilaku di bawah ini.

jumping input

Seperti yang Anda lihat, setiap komponen melompat kecuali yang pertama.
Sebagai catatan ini adalah output dari perintah ionic info .

Cordova CLI: 6.4.0
Versi Kerangka Ionik: 2.0.0-rc.5
Versi CLI Ionik: 2.2.1
Versi Lib Aplikasi Ionic: 2.2.0
Versi Skrip Aplikasi Ionic: 1.0.0
versi ios-deploy: Tidak diinstal
versi ios-sim: Tidak diinstal
OS: Windows 10
Versi Node: v6.9.2
Versi Xcode: Tidak diinstal

@almr193 perilaku itu terlihat benar. Layar bergulir sebagai keyboard akan terlihat di perangkat seluler. Pengguliran memastikan bahwa input yang disorot selalu terlihat dan tidak tercakup oleh keyboard di layar.

@dylanvdmerwe Terima kasih atas balasan cepatnya, skenario yang saya sajikan terlihat benar dan saya mengerti bahwa layar bergulir saat keyboard muncul di layar. Namun, saya punya skenario aneh lainnya dengan ion-input dalam ion-list dengan pemesanan ulang item diaktifkan. Input melompat keluar batas dan pengguna tidak dapat melihat apa yang sedang ditulis.

jumping

@almr193 ya, ini masih merupakan masalah yang belum terpecahkan, sayangnya.
Lihat Android item 1) dan 4) dari posting awal di atas.

+1 Masih belum terselesaikan. Metode apa pun dari Keyboard di ionic-native sepertinya tidak membantu di Android

Saya mendapat masalah dengan menggunakan slide + input. Ini menunjukkan perilaku yang sangat aneh dengan tidak melakukan pengguliran apa pun.

ezgif com-resize

+1

Cordova CLI: 6.4.0
Versi Kerangka Ionik: 2.0.0
Versi CLI Ionik: 2.1.18
Versi Lib Aplikasi Ionic: 2.1.9
Versi Skrip Aplikasi Ionic: 1.0.0
versi ios-deploy: Tidak diinstal
versi ios-sim: 5.0.13
OS: macOS Sierra
Versi Node: v6.9.4
Versi Xcode: Xcode 8.2.1 Versi build 8C1002

+1

Ini masih menjadi masalah dengan cordova dan ion terbaru dan terhebat.

Apakah ada solusi atau solusi?

-- Diperbarui --

Saat Anda mulai mengetik, input digulir ke tampilan tetapi saat keyboard pertama kali ditampilkan, input dikaburkan oleh keyboard.

--

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

Layar awal

image1

Layar setelah memilih elemen input Domain

image2

Tim ionik yang terhormat ( @manucorporat , @brandyscarney , @adamdbradley )
Saya tahu Anda bekerja keras pada versi berikutnya, tetapi masalah keyboard ini sangat penting untuk pengalaman aplikasi. Harap pertimbangkan untuk memberi mereka prio tinggi, bersama dengan masalah lama lainnya seperti gulir virtual.
Ukuran aplikasi yang besar dan startup yang lambat, oke, tetapi ketika aplikasi diinstal dan dijalankan, itu akan memberikan pengalaman yang tepat pada hal-hal dasar seperti penanganan keyboard.

Harus berpadu di sini, @mpaland benar. Ada begitu banyak bug yang beredar (beberapa di antaranya sudah 4 bulan dan masih terbuka tanpa balasan!) yang berkaitan dengan fungsionalitas dasar aplikasi. Lihat di sini misalnya:

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

Ini tampaknya dibiarkan membusuk, sementara tim menambahkan fitur yang diakui bagus, seperti panel split baru-baru ini.

Masalahnya adalah, tidak ada gunanya menambahkan fitur baru jika fitur inti masih rusak dalam beberapa cara yang jelas. Bisa dibilang lebih penting untuk mendapatkan hal-hal mendasar dengan benar sebelum menambahkan ke kerangka kerja.

Mencintai semua kerja keras, tetapi prioritas tampaknya salah di sini.

Teman-teman, cara terbaik untuk memprioritaskan dan memperbaiki hal-hal adalah dengan menyediakan _kode yang dapat direproduksi_ yang dapat diuji dan ditemukan masalahnya oleh tim Ionic. Tangkapan layar dan gif sangat bagus, tetapi kode yang dapat digunakan untuk melihat masalah Anda adalah yang terbaik. #2 sen

Perhatikan bahwa dengan formulir dan input, jangan gunakan display: absolute untuk memposisikan sesuatu.

Saya juga mengalami masalah ini. Ini bukan masalah sepele. Bagaimana ini menjadi masalah selama satu tahun sekarang dengan tampaknya tidak ada perbaikan?

Saya mengalami masalah ketika bidang input difokuskan, layar naik dan turun setiap kali saya mengklik bidang tersebut. Bisakah seseorang membantu saya, tolong?
teste

Versi Kerangka Ionik: 2.3.0
Versi CLI ionik: 2.2.2
Versi Lib Aplikasi Ionic: 2.2.1
Versi Skrip Aplikasi Ionic: 1.1.4
versi penyebaran ios: 1.9.1
versi ios-sim: 5.0.4
OS: macOS Sierra
Versi Node: v7.2.0
Versi Xcode: Xcode 8.2.1 Versi build 8C1002

@pedrodurek alangkah baiknya jika Anda memberikan plunker sehingga orang-orang di ionic dapat mereproduksi.

Saya telah menemukan solusi sementara untuk masalah teks melompat-lompat. Ini BUKAN perbaikan tetapi pada dasarnya peretasan sampai perbaikan yang lebih baik diterapkan.

Pertama, pastikan Anda memiliki set ini:

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

selanjutnya, di app.module.ts Anda, temukan yang berikut:

IonicModule.forRoot(YourApp)

dan buat seperti ini:

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

Ini memperbaiki masalah lompatan yang saya miliki, tetapi sayangnya memiliki efek mendorong navbar dari layar saat pengguna mengetik. Ini tampaknya menjadi satu-satunya efek samping buruk yang saya perhatikan.

@Tyler-Darby Terima kasih telah membagikan solusi Anda, ini bukan solusi terbaik tetapi ini masuk akal, dan itu berhasil untuk saya.

Saya mengalami masalah ini dan itu membuat saya gila, tetapi akhirnya saya tahu bahwa itu disebabkan oleh menerapkan transform: translate3d(0,0,0) ke elemen untuk memaksa akselerasi perangkat keras. Ternyata itu merusak fokus input saat keyboard muncul.

Saya yakin itu bukan penyebab masalah semua orang, tapi semoga bisa membantu seseorang.

Saya memiliki banyak platform dan saya memperbaikinya dengan ..

Saya memasukkan 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' )
               ...

Mungkin itu akan bermanfaat bagi seseorang.
Terima kasih teman-teman untuk petunjuk ;)

Cek videonya:
https://www.dropbox.com/s/6p49z0chle9g1b9/git-ios-input.mov?dl=0

Informasi lingkungan:
paket global:

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

paket lokal:

@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

Sistem:

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

Saya menggunakan <input/> sebagai <ion-input></ion-input>
Cobalah dengan itu.

Hai @maulikakapure ,

Saya memulai aplikasi ionik pertama saya untuk perusahaan saya dan saya juga memiliki masalah pengguliran/fokus dengan keyboard. Jelas Anda menemukan solusi yang telah Anda tunjukkan di video Anda. Bisakah Anda memberikan kode sumbernya? Saya belum menemukan kombinasi yang tepat dari solusi, parameter konfigurasi, dan tag html untuk digunakan.

Terima kasih

@Tyler-Darby Hei Tyler, di mana saya meletakkan kode berikut?

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

Hai @cwiejack

Silakan periksa demo sederhana di sini: https://www.dropbox.com/s/1o9hrnjgt7u3bpy/BasicDemo.zip?dl=0

Terima kasih.

Untuk memperbaiki masalah kata kunci default dengan Ionic, cukup masukkan yang berikut ini di impor app.module.ts Anda:

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

Itu akan segera memperbaiki masalah keyboard.

@aplimovil ini memecahkan masalah di aplikasi Android saya! banyak sorakan untuk Anda orang baik!

Apa gunanya memiliki scrollAssist & autoFocusAssist jika menyetelnya ke true membuat aplikasi tidak dapat digunakan?

Apakah ada kasus di mana mengaktifkannya akan memberikan beberapa keuntungan?

perbaikan aplimovil tampaknya telah memperbaiki semua masalah yang saya alami!

Jadi ya, saya akan tertarik mengapa Anda pernah menetapkan salah satu dari itu menjadi benar.

@JefferE Itu karena fitur scrollAssist dan autoFocusAssist Ionic rusak di iOS (di Android mereka hampir berfungsi dengan baik, meskipun peningkatannya praktis tidak diperhatikan setidaknya untuk saya) dan sepertinya tidak cukup mencatat semua laporan masalah di sini sehingga mereka memperbaikinya dalam rilis yang akan datang. Semoga suatu hari mereka akan memperhatikan utas ini dan memperbaiki fitur-fitur itu untuk selamanya di iOS atau secara selektif mematikannya secara default untuk saat ini di iOS.

ketika ion-textarea di grid,keyboard.disablescroll(false) tidak berfungsi? bagaimana dengan masalah ini

Ini berhasil untuk saya

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

    }),

Informasi ionik:

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 

hanya ingin memberi tahu kalian bahwa saya memiliki masalah serupa di iOS yaitu keyboard menggulir di atas bidang input dan layar konten tidak diperbarui untuk memberi ruang bagi keyboard.

bagian penting yang saya temukan adalah ketika menggunakan plugin (seperti @ionic-native/keyboard)
dan melakukan sesuatu pada antarmuka Anda saat keyboard ditampilkan dengan this.keyboard.onKeyboardShow().subscribe(()=>{ this.someFlag=true}) dan menggunakan tanda di antarmuka untuk mengubah sesuatu. itu tidak akan berubah , Anda harus memicu sendiri deteksi perubahan sudut dengan mengimpor ChangeDetectorRef dan menggunakan fungsi detectChanges() di subscribe .

Saya telah membuat gitrepo ini untuk menunjukkan subscribe(()=>{}) untuk sesuatu, membuat perubahan, tetapi tidak akan ditampilkan di antarmuka.

menjadi sedikit lebih bijaksana hari ini :)

hal terakhir: selamat berakhir pekan semuanya!

Sangat membingungkan bagi saya bahwa masalah ini sudah berusia lebih dari 1,5 tahun dan tidak ada tindakan yang diambil. Ini benar-benar merusak aliran aplikasi saya. Itu membuatnya terlihat buggy dan berkualitas buruk dan kami harus melakukan peretasan untuk membuat segalanya mendekati terlihat bagus. @mhartington apakah ada sesuatu yang terjadi secara internal di sini?

Saya telah melakukan percakapan telepon dengan @matthewkremer dari Ionic sebagai tindak lanjut dari penggunaan ionic versi PRO sekarang, dan menekankan bahwa ini adalah masalah besar. Dia mengatakan dia mengerti dan akan mencoba untuk mendorong ini ke prioritas yang lebih tinggi.

Sama untuk ku. Ini tidak terlihat bagus sama sekali..

Hai semua, ini menjadi prioritas utama bagi kami, lihat tweet @adamdbradley pagi ini: https://twitter.com/adamdbradley/status/916295747968040960

Harapkan pembaruan dalam beberapa hari/minggu mendatang

Kedengarannya bagus, saya harap kita akan segera hidup kembali tanpa menerapkan peretasan yang tidak perlu.

Untuk orang-orang yang sudah menggunakan WK, saya sedang menyiapkan plugin keyboard baru: cordova-plugin-ionic-wkkeyboard :

  1. Uninstall dulu ionic-plugin-keyboard
cordova plugin rm ionic-keyboard-plugin --save
  1. Instal plugin baru:
cordova plugin add cordova-plugin-ionic-wkkeyboard --save

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

Ada masalah aneh dengan wkkeyboard baru ini dan menonaktifkan/mengaktifkan ion-textarea dengan FormGroups dan FormControls. Setelah mengaktifkan kembali formulir lengkap, ion-textarea tetap dinonaktifkan. Itu tidak terjadi saat menggunakan keyboard 'lama'.

Saya akan membuat masalah malam ini :).

// Sunting:
Mungkin itu masalah yang terkait dengan hal lain. Perilaku yang sama di browser.
https://github.com/ionic-team/ionic/issues/13170

Apa yang harus saya cari jika keyboard tidak memicu pengubahan ukuran apalagi gulir ke input?

Sepertinya masalah pengguliran seharusnya sudah diselesaikan, tetapi saya masih mengalami masalah di ios di mana ketika input berada di tengah layar, input tidak digulir ke saat keyboard menyala. Ini adalah masalah baik ketika input diketuk atau ketika saya menggunakan tombol navigasi keyboard. Apakah saya melewatkan sesuatu? Saya telah mencoba banyak solusi yang disajikan di sini, tetapi tampaknya tidak berhasil. (untuk info tambahan saya menggunakan Ionic di browser bukan sebagai aplikasi asli)

wow 2018 dan tidak ada apa-apa.

mereka memberi saya solusi ini tetapi itu tidak cukup sempurna

.scroll-konten {
padding-bottom: 0!penting;
}

Hai teman-teman, saya tidak sengaja menemukan bahwa build default memiliki _cordova-plugin-ionic-keyboard_. Dan ketika saya menggantinya dengan bug input _ionic-plugin-keyboard_ telah hilang.

Jadi solusi saya adalah:
plugin cordova rm ionic-keyboard
plugin ionic cordova tambahkan ionic-plugin-keyboard
npm install --save @ionic-native/keyboard

+1

Vendettall, saya mencobanya tetapi tidak berhasil!

Apakah Anda memiliki bug yang mengganggu ini dengan bilah alat header?

Pada Kam, 29 Mar 2018 pukul 23.31, Emmanuel Fache [email protected]
menulis:

Vendettall, saya mencobanya tetapi tidak berhasil!


Anda menerima ini karena Anda berkomentar.
Balas email ini secara langsung, lihat di GitHub
https://github.com/ionic-team/ionic/issues/6228#issuecomment-377362762 ,
atau matikan utasnya
https://github.com/notifications/unsubscribe-auth/AYPMdggjRqZBZ0wghtxFjVbPLViBkR8hks5tjUSQgaJpZM4IKhUp
.

Jika Anda masih mengalami masalah ini, silakan coba plugin keyboard ionik yang lebih baru

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

Kemudian atur

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

Di config.xml

Hai,
Di aplikasi saya bekerja, semuanya berfungsi dengan baik. Tetapi karena beberapa alasan saya harus menggunakan input dalam tabel html. Dalam hal ini, setiap kali saya mengklik input, itu menggambar ulang tabel, dan mengatur ulang gulir tabel.
Adakah yang bisa membantu di sini?

juga melihat masalah transformasi terjadi. Ini cukup mengganggu.
video-to-gif

Untuk menggulir pb, saya menulis peretasan di sini: https://github.com/ionic-team/ionic/issues/10629#issuecomment -395084125

Komentar di atas AbrahamLopez10 berkomentar pada 1 Agustus 2017 bekerja dengan sempurna untuk saya, menggulir bidang input ke tampilan saat keyboard Android muncul.

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

Hai teman-teman, saya baru saja membuat arahan khusus untuk menangani masalah ini di platform iOS dan Android untuk aplikasi Ionic 2 & 3. Bisakah Anda memeriksa apakah ini menyelesaikan semua masalah yang terkait dengan masalah pengguliran ini.

Saya menggunakan ponyfill scroll-to-view-if-needed untuk membuat arahan ini

Instal direktif ion-input-scroll-into-view menjalankan perintah npm install ion-input-scroll-into-view

Langkah 1
Lampirkan direktif ion-input-scroll-to-view ke ion-input atau ion-textarea sebagai berikut.

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

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

Langkah 2

Anda harus mengimpor IonInputScrollIntoViewModule di module.ts komponen induk Anda sebagai berikut

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

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

Terima kasih untuk masalah ini! Kami telah memindahkan kode sumber dan masalah untuk Ionic 3 ke dalam repositori terpisah. Saya memindahkan masalah ini ke repositori untuk Ionic 3. Harap lacak masalah ini di sana.

Terima kasih telah menggunakan Ionic!

Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

giammaleoni picture giammaleoni  ·  3Komentar

Nick-The-Uncharted picture Nick-The-Uncharted  ·  3Komentar

vswarte picture vswarte  ·  3Komentar

GeorgeAnanthSoosai picture GeorgeAnanthSoosai  ·  3Komentar

masimplo picture masimplo  ·  3Komentar