Penjelasan detail cara mengatasi masalah antarmuka tidak kembali ke posisi semula saat keyboard IOS ditarik kembali melalui event focusout

Saat ini, saat mengembangkan halaman seluler H5, saya mengalami masalah yaitu antarmuka tidak dapat kembali ke posisi semula saat keyboard ditarik kembali di iOS. Masalah dan gejalanya dijelaskan secara rinci di bawah ini:

Halaman yang dimaksud adalah struktur formulir. Artinya, ini mirip dengan struktur dengan empat formulir masukan di bawah div bagi pengguna untuk mengisi informasi pengiriman. serupa:

 <div> <input type=text placeholder=Harap isi provinsi, kota dan kabupaten/> <input type=text placeholder=Harap isi alamat/> <input type=text placeholder=Harap isi nama/> < input type=text placeholder=Silahkan isi alamat/Nomor kontak/></div>

Tangkapan layarnya adalah sebagai berikut:

Saat pengguna memasukkan nomor kontak di ponsel, keyboard iPhone akan muncul. Saat ini, untuk memungkinkan pengguna melihat kotak input telepon, seluruh halaman akan dipindahkan ke atas di iPhone (jika tidak, keyboard akan dipindahkan ke atas). akan menutupi kotak masukan telepon). Saat ini, bagian atas halaman sebenarnya berada agak jauh dari viewport kita (kita melihat deretan kotak input menghilang dari antarmuka).

Namun, ketika pengguna menyelesaikan input dan menutup keyboard, meskipun keyboard telah disingkirkan, posisi halaman tidak akan dikembalikan.

Faktanya, hal ini disebabkan oleh ketidakmampuan iOS untuk mencegah bagian halaman yang bergulir keluar dari area pandang agar tidak jatuh saat keyboard ditarik. Saat ini, pengguna dapat menyeret halaman kembali dengan jarinya.

Tapi pengalamannya sama sekali tidak bagus.

Untuk mengatasi masalah ini, kita dapat memanggil window.scrollTo(0, 0) ketika kursor pengguna meninggalkan kotak input untuk menggulir halaman agar sejajar dengan bagian atas viewport, sehingga mencapai efek beranda halaman.

Jadi sekarang masalahnya adalah menambahkan kejadian blur ke keempat kotak masukan di formulir, lalu memanggil window.scrollTo di handler. Namun, apakah itu ditambahkan melalui @blur Vue atau melalui operasi DOM, 4 event pendengar harus ditambahkan, yang mana hal ini sangat tidak elegan. Tentu saja, kami berpikir untuk menggunakan proxy acara.

Artinya, kita menempatkan event listening pada elemen teratas, lalu mendefinisikan fungsi inputBlur untuk menunggu pemicuan.

 <div @blur=inputBlur> <input type=text placeholder=Harap isi provinsi, kota dan kabupaten/> <input type=text placeholder=Harap isi alamat/> <input type=text placeholder=Harap isi name/> <input type=text placeholder=Silakan isi nomor kontak Anda/></div>

Akibatnya, kami menemukan bahwa pendengar acara kami gagal diaktifkan. Pasalnya, kejadian blur pada kotak input tidak bisa menggelembung.

Setelah melakukan kueri, ditemukan bahwa dua peristiwa DOM focus dan blur tidak dapat menggelembung dalam spesifikasi. Serupa dengan ini, ada dua peristiwa lainnya focusin dan focusout yang dapat menggelembung.

Beberapa artikel di Internet menyebutkan bahwa focusin dan focusout adalah peristiwa DOM yang hanya didukung oleh browser IE. Faktanya, jika kami melihat dokumen MDN, kami menemukan bahwa kedua peristiwa ini telah menjadi standar dalam spesifikasi DOM 3, dan didukung oleh banyak browser.

Oleh karena itu, untuk menyelesaikan masalah secara tegas melalui kedua peristiwa tersebut, kami mengubahnya focusout

 <div @focusout=inputBlur> <input type=text placeholder=Harap isi provinsi, kota dan kabupaten/> <input type=text placeholder=Harap isi alamat/> <input type=text placeholder=Harap isi name/> <input type=text placeholder=Silakan isi nomor kontak Anda/></div>

Kemudian, implementasikan event handler kami:

 inputBlur(e) { // Pertama, tentukan apakah elemen target yang memicu event adalah kotak input. Kita hanya fokus pada perilaku kotak input. if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'input') { window.scrollTo(0,0) } ;

Saat ini, masalah kami telah terpecahkan. Saat memasukkan konten dari kotak input dan kemudian mengklik Selesai pada keyboard untuk menutup keyboard, efeknya sesuai dengan harapan kami.

Namun, setelah pengujian pada ponsel, kami menemukan bahwa ketika kami beralih langsung dari 电话输入框ke 姓名输入框, halaman akan bergetar. Mari kita lanjutkan analisisnya.

Faktanya, alasan mengapa kedua kotak input bergetar saat berpindah juga sangat sederhana. Karena ketika kita beralih di antara dua kotak masukan di atas, halaman pertama-tama akan memicu peristiwa blur pada 电话输入框, dan kemudian memicu peristiwa focus pada 姓名输入框. Dalam hal ini, ketika blur terjadi, window.scrollTo(0,0) kita akan terpicu, menyebabkan halaman bergulir ke bawah, dan kemudian 姓名输入框akan terfokus, sehingga keyboard akan terus muncul---ini akan menyebabkan halaman bergerak ke atas lagi.

Faktanya, saat beralih di antara dua kotak masukan, kita tidak perlu memicu perilaku window.scrollTo saat kotak masukan pertama kabur. Jadi mari kita modifikasi kode kita sehingga ketika operasi peralihan kotak masukan terjadi, perilaku kotak masukan pertama dapat terpotong. Di sini kami menggunakan setTimeout untuk menyelesaikannya:

 <div @focusout=inputBlur @focusin=inputFocus> <input type=text placeholder=Harap isi provinsi, kota dan kabupaten/> <input type=text placeholder=Harap isi alamat/> <input type=text placeholder= Silakan isi nama/> < input type=text placeholder=Harap isi nomor kontak Anda/></div> 

 inputBlur(e) { // Pertama, tentukan apakah elemen target yang memicu event adalah kotak input. Kita hanya fokus pada perilaku kotak input. if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'input') { // Kotak input kehilangan fokus, dan keyboard IOS perlu dikeluarkan dari menggulir bagian halaman untuk memulihkannya. Gulir halaman ke bagian atas jendela dan sejajarkan console.log('set timer') this.timer = setTimeout(() => { console.log('timer trigger') window.scrollTo(0,0); }, 0) } }, inputFocus(e) { // Jika fokus, hilangkan pengatur waktu dari kotak masukan sebelumnya if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'input') { clearTimeout(this.timer);

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.