Ringkasan isu dengan textarea dan input dalam program mini WeChat

Artikel ini membawa anda pengetahuan yang berkaitan tentang Program Mini WeChat Ia terutamanya memperkenalkan ringkasan masalah kawasan teks dan input dalam program mini Apabila kedua-dua komponen ini digunakan secara berasingan, Tiada masalah. tetapi apabila mereka berdua muncul bersama, masalah datang satu demi satu Mari kita lihat bersama-sama.

[Cadangan pembelajaran berkaitan: Tutorial pembelajaran program mini]

Dalam program mini WeChat, terdapat dua komponen asli textarea dan input , tidak ada masalah apabila menggunakan hanya satu daripada dua komponen ini, tetapi apabila ia muncul bersama-sama, masalah datang satu demi satu, dan mereka semua adalah masalah metafizik yang saya hadapi semasa pembangunan halaman hanyalah untuk merealisasikan fungsi menolak halaman secara manual. Ia mengambil masa beberapa hari untuk menyelesaikannya!

Rendering:

Berfikir

Selepas saya menyelesaikan masalah metafizik ini dengan cara yang istimewa, saya banyak berfikir

• Mengapa terdapat masalah metafizik ini apabila kawasan teks dan input digunakan bersama?

• Saya jelas menulisnya dengan cara biasa, mengapakah ia boleh berfungsi pada telefon iOS tetapi tidak pada telefon Android?

• Kenapa kadang-kadang boleh dan tidak kadang-kadang?

...dsb.

Untuk tidak mengambil jalan memutar dalam isu ini pada masa hadapan, saya memutuskan untuk meneroka cinta antara textarea dan input

Mesin ujian

Mesin yang digunakan dalam penerokaan ini ialah

Mesin Android: Honor 20, Xiaomi 10s; 🎜>mesin ios: iPhone13

Inilah soalan metafizik!

1. Bind bindkeyboardheightchange event

Masalah: Hanya ikat bindkeyboardheightchange event untuk textarea, input juga akan mencetuskan bindkeyboardheightchange event of textarea, dan Parameter yang dibawa oleh pencetus adalah semua parameter pada kawasan teks

Model: Android mesti muncul

Contoh:

Penyelesaian: Tidak Ditemui penyelesaiannya

2. Apabila menetapkan hold-keyboaed kepada true

Masalah: Apabila menetapkan atribut hold-keyboaed bagi textarea dan input kepada true, dan dalam input Apabila a taip bukan teks, penukaran berterusan akan menyekat penyiapan di atas papan kekunci dan kawasan teks tidak akan difokuskan lagi.

Model: Android mesti muncul

Contoh gif:

Penyelesaian: 1. Jangan paparkan butang selesai di atas kawasan teks apabila papan kekunci dinaikkan melalui show-confirm-bar, 2. Tetapkan jenis input kepada teks, 3. Jangan tetapkan penahanan- keyboaed adalah benar

3. Masalah penembusan Textarea

Masalah: Apabila terdapat elemen tetap, tidak kira berapa banyak nilai indeks-z ditetapkan, textarea komponen akan menembusi Elemen tetap

Model: Android Muncul sekali-sekala

Titik metafizik: Kadang-kadang ia tidak muncul, tetapi apabila saya menyusun semula dan mengimbas kod untuk pratonton, masalah penembusan textarea akan berlaku, dan kemudian Ia akan sentiasa muncul, tetapi apabila saya memadamkan program mini pada telefon saya dan menyusun semula serta mengimbas kod, ada kemungkinan masalah itu tidak akan berlaku

Contoh gif:

Penyelesaian: Apabila anda memerlukan elemen tetap untuk menutupi kawasan teks, anda boleh menyembunyikan kawasan teks atau mengubahnya menjadi elemen paparan apabila elemen tetap muncul

4. Ikat acara bindfocus

Masalah: Apabila hanya mengikat acara bindfocus ke textarea, selepas memasuki halaman dan mengklik pada textarea, kemudian dengan serta-merta mengklik pada input akan mencetuskan acara fokus textarea

Model: Android Kadangkala

Contoh gif:

Penyelesaian: Anda boleh menggunakan fokus untuk mengawal fokus kawasan teks secara dinamik dan cuba jangan untuk menetapkan jenis input kepada jenis nombor

5 Animasi peralihan

Masalah: Jika anda mengangkat halaman secara manual ke bahagian bawah atau menterjemahY semasa proses mengangkat papan kekunci, dan tetapkan. atribut animasi peralihan, ia akan menyebabkan pemegang tempat kawasan teks berkelip

Model: Android mesti muncul

Contoh gif:

Penyelesaian: Tentukan model, tambah atribut peralihan untuk ios, mesin android Jangan tambah atribut peralihan

6. Apabila mengklik untuk menyelesaikan

Masalah: textarea mengikat acara bindkeyboardheightchange, dan menggunakan penyelesaiannya sendiri, acara bindkeyboardheightchange tidak akan dicetuskan apabila mengklik untuk menyelesaikan

Model: Android Kadangkala

Contoh gif:

Penyelesaian: Tiada penyelesaian ditemui

7 🎜> Masalah dengan ketinggian auto: Apabila atribut ketinggian auto Textarea adalah benar, ia akan menyebabkan masalah apabila menggunakan selectComponet untuk mendapatkan ketinggian. ketinggian kawasan teks. Ketinggian lalai

Model: ios dan Android

Penyelesaian: Kawal nilai ketinggian automatik secara dinamik, atau gunakan pemasa untuk menangguhkan mendapatkan ketinggian

8. Papan Kekunci Pemerolehan ketinggian tidak konsisten

Masalah: Peristiwa bindkeyboardchange dicetuskan beberapa kali, dan ketinggian papan kekunci yang diperoleh daripada acara itu kadangkala mempunyai ketinggian yang lengkap, kadangkala berlaku bukan.

Model: Android Kadangkala

Penyelesaian: Tiada penyelesaian ditemui

9. Masalah mendapatkan ketepatan data

Masalah: Mendapatkan elemen melalui selectComponet Apabila menetapkan ketinggian, lebar atau kedudukan, semua perpuluhan akan dikekalkan secara lalai, iaitu kira-kira 16 digit, yang boleh menyebabkan kekeliruan dalam animasi

Model: ios dan Android Kadangkala

Penyelesaian: bahasa js itu sendiri Terdapat masalah ketepatan, jadi selepas memperoleh data melalui selectComponent, sebaiknya simpan dua tempat perpuluhan sahaja untuk pemprosesan

[Cadangan pembelajaran berkaitan:

Tutorial Pembelajaran Program Mini

]

Atas ialah kandungan terperinci Ringkasan isu dengan textarea dan input dalam program mini WeChat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!