Kata pengantar
Baru -baru ini, produk perlu membuat banyak kotak input. Efek interaktif yang diinginkan produk adalah: pengguna dapat memasuki bahasa Mandarin dan Inggris, dan ketika input pengguna masuk, jumlah karakter yang telah dimasukkan dapat ditampilkan secara real time. Ketika batas kuantitas melebihi batas, batas kotak input berubah merah, dan pengguna diminta untuk informasi.
Interaksi ini kedengarannya tidak masalah, dan tampaknya tidak ada kesulitan dalam implementasi teknis. Tetapi ketika saya menyadarinya, saya menemukan metode input Cina dan menemukan bahwa ada jebakan.
Sungguh trik, mari kita lihat di bawah ~~
Pemantauan waktu nyata dari panjang konten kotak input, pit yang ditemui digunakan untuk memantau acara oninput .
Ada 2 manfaat menggunakan acara oninput ini:
Ketika pengguna mengubah konten kotak input dengan mengklik kanan, ia dapat didengar;
Acara ini hanya akan dipicu ketika konten kotak input berubah. Misalnya, acara ini tidak akan dipicu ketika pengguna menekan tombol karakter kontrol seperti tombol panah, control / shift , dll.;
Efeknya sempurna saat Anda memasukkan karakter atau angka bahasa Inggris, dan bahkan ketika Anda正常输入中文. Tetapi ketika Anda非正常输入中文bug akan terjadi. Seperti apa input abnormal? Lihat contoh gambar berikut:
Pernahkah Anda melihatnya? Dalam metode input Cina ini, pengguna belum memasuki bahasa Cina yang ingin ia masukkan, tetapi baru saja memasukkan beberapa pinyin, tetapi acara input dipicu, dan value kotak input yang didengarkan sebenarnya adalah d'd'd , tidak hanya karakter pinyin, tetapi juga poin yang terpisah. Jika panjang konten kotak input terbatas tidak lebih dari 5, maka dalam kasus tangkapan layar, pengguna akan diminta untuk字符长度超过限制！ . Tentu saja, efek interaktif seperti itu bukan yang diinginkan produk.
Gunakan acara onkeydown / onkeypress / onkeyup untuk mendengarkan
Kerugian dari peristiwa ini adalah bahwa mereka tidak dapat mendengarkan konten input yang disalin dari klik kanan, tetapi apakah akan ada masalah yang sama dengan peristiwa input ?
Saya melakukan beberapa percobaan dan menemukan bahwa keydown dan keyup akan menghadapi masalah yang sama dengan input , tetapi keypress tidak memiliki masalah ini, karena dalam keadaan input Cina, keypress tidak akan memicu, tidak hanya tidak akan memicu selama proses memasuki pinyin, tetapi tidak akan memicu setelah Anda memilih bahasa Cina yang Anda ingin masuk "dengan benar, kanan, tetapi benar. Kemudian ketika "kanan, kanan, kanan" dimasukkan, meskipun batas karakter terlampaui,字符长度超过限制！ Tips untuk.
Solusi kompromi
Untuk memantau lamanya konten secara real time dan untuk memastikan bahwa tidak ada bug dalam metode input Cina, saya telah berjuang untuk waktu yang lama dan akhirnya menemukan bahwa saya tidak dapat melakukannya! (Jika ada pahlawan yang ditemukan, tolong beri tahu saya ~~).
Jadi pada akhirnya, pengalaman pengguna dikorbankan dan kompromi ditemukan: kotak input kehilangan fokusnya (mis., blur ), atau pengguna hanya memeriksa panjang konten ketika kunci input dimasukkan. Tentu saja, jika Anda menemukan bahwa konten kotak input melebihi batas, Anda harus menyimpan kursor di kotak input untuk memfasilitasi modifikasi pengguna.
Sayangnya,用户输入回车键时才进行内容长度的检测dan jebakan yang telah ditanam sebelumnya.
Cara mendeteksi bahwa tombol enter dimasukkan dalam kotak input
Bahkan, ini adalah interaksi yang sangat umum. Misalnya, saat memodifikasi nama, ia mendukung pengguna untuk masuk dan menyimpan langsung setelah memasukkan kereta, dan saat masuk, ia mendukung pengguna untuk masuk dan masuk langsung setelah memasukkan kereta. Tetapi jebakan yang harus hati -hati adalah: **中文输入法下按回车键来输入英文字符** .
Contoh proses menekan tombol Enter untuk memasukkan karakter bahasa Inggris di bawah metode input Cina:
Misalnya, jika saya ingin memasukkan akun untuk masuk, akun saya ada di semua bahasa Inggris. Saat ini saya dalam metode input Cina, tetapi saya terlalu malas untuk mengganti metode input, jadi saya secara langsung mengetik akun saya (semua karakter bahasa Inggris). Pada saat ini, metode input Sogou mendorong saya serangkaian besar Cina, dan kemudian saya menekan enter, dan kotak input memasuki karakter bahasa Inggris yang saya inginkan.
Dalam hal ini, meskipun pengguna memasukkan tombol Enter, pengguna menekan tombol ENTER hanya untuk memasukkan karakter bahasa Inggris di bawah metode input Cina. Kunci Enter ini bukanlah kunci Enter yang ingin kami pantau. Jadi bagaimana cara mengesampingkan tombol Enter dalam kasus ini?
Secara umum, saat mendengarkan kunci Enter, kami akan menggunakan acara keydown atau acara keyup , dan kode implementasi adalah sebagai berikut. Jadi dapatkah kedua metode memfilter tombol Enter yang tidak ingin kami dengarkan?
//Method 1: Use keydown event input.onkeydown = function(e){ if(e.keyCode == 13){ //The user inputs the Enter key//dos related operations}}//Method 2: Use keyup event input.onkeyup = function(e){ if(e.keyCode == 13){ //The user inputs the Enter key//dos related operations}} Setelah percobaan, ditemukan bahwa menggunakan keydown dapat berhasil menyaring, tetapi menggunakan keyup tidak dapat.
Jadi mari kita lihat mengapa?
Ini karena dalam acara keydown : Key Enter Key yang dimasukkan dalam keadaan metode input Cina, keyCode yang terdeteksi adalah 229 bukan 13 ; Saat hanya memasukkan pengembalian, keyCode adalah 13 .
Dalam acara keyup : keyCode yang terdeteksi dengan memasukkan tombol ENTER dalam keadaan Metode Input Cina adalah 13 ; Saat hanya memasukkan enter, keyCode juga 13 .
Gambar berikut adalah hasil yang saya cetak di konsol: (lihat di sini untuk contoh kode)
Kesimpulan
Beberapa peristiwa yang terlibat dalam kotak input: keydown/keyup/keypress/input/change
Lihat di sini: //www.vevb.com/article/21237.htm