jquery menyembunyikan papan kekunci mudah alih

Dalam reka bentuk web pada peranti mudah alih, penggunaan kotak input adalah bahagian penting, dan kaedah input pada telefon bimbit skrin sentuh terutamanya direalisasikan melalui papan kekunci lembut. Walau bagaimanapun, dalam beberapa senario tertentu, papan kekunci lembut jelas tidak diperlukan Contohnya, dalam halaman yang hanya menyediakan fungsi paparan, atau apabila kandungan kotak input telah diisi terlebih dahulu, tidak perlu membuka papan kekunci lembut. Papan kekunci hilang. Pada masa ini, kita perlu menggunakan beberapa teknik untuk mencapai kesan menyembunyikan papan kekunci telefon bimbit, dan jQuery ialah ahli penting dalam perayaan ini.

1. Kaedah konvensional menyembunyikan papan kekunci

Untuk mengawal paparan dan penyembunyian papan kekunci, kami boleh menggunakan beberapa API yang disediakan oleh penyemak imbas. Kaedah biasa termasuk blur() dan fokus(), yang boleh membuat kotak input hilang fokus dan mendapatkan fokus Sejajar dengan itu, mereka mengawal paparan dan menyembunyikan papan kekunci.

Ambil kaedah blur() sebagai contoh Apabila kotak input dicetuskan, kita boleh melaksanakan kod berikut untuk menyembunyikan papan kekunci:

$('input, textarea').on('focus', function() {
    document.activeElement.blur();
});

Dengan cara ini, kesan menyembunyikan papan kekunci. papan kekunci boleh dicapai. Walau bagaimanapun, kaedah ini hanya menghalang kotak input daripada mendapat fokus Jika anda masih mahu menggunakan kotak input ini untuk input, pemilihan, dsb., anda perlu mengklik kotak input sekali lagi.

2. Kaedah jQuery

jQuery menyediakan kami beberapa kaedah yang lebih mudah untuk mengawal paparan dan penyembunyian papan kekunci. Yang paling biasa digunakan ialah kaedah blur(), focus() dan trigger().

1. blur()

Sama seperti kaedah yang disediakan oleh penyemak imbas, kaedah blur() akan menyebabkan kotak input semasa hilang fokus. Kaedah ini boleh menerima fungsi panggil balik sebagai parameter Apabila kotak input benar-benar kehilangan fokus, fungsi panggil balik ini akan dicetuskan.

$('input, textarea').blur(function() {
    // 这里是回调函数
});

2. fokus()

Begitu juga, kaedah fokus() boleh menjadikan kotak input semasa mendapat fokus.

$('input, textarea').focus(function() {
    // 这里是回调函数
});

3. trigger()

kaedah jQuery’s trigger() boleh mensimulasikan peristiwa tertentu dan secara tidak langsung mengawal paparan dan penyembunyian papan kekunci dengan cara ini.

$('button').click(function() {
    $('input').trigger('blur');
});

Dalam contoh ini, apabila butang diklik, peristiwa kabur kotak input akan dicetuskan. Oleh itu, kotak input kehilangan fokus, menyembunyikan papan kekunci.

3. Kaedah untuk menyembunyikan papan kekunci

Akhir sekali, kita boleh menggabungkan kaedah di atas untuk merealisasikan fungsi menyembunyikan papan kekunci. Berikut ialah contoh mudah:

// 绑定输入框的获取焦点事件
$('input').focus(function() {
    // 输入框获取到焦点时，立即执行 blur 事件
    $(this).blur();
});

Kod ini mudah, tetapi ia menghalang papan kekunci lembut daripada muncul. Apabila kotak input diklik, acara fokus akan dicetuskan, dan kemudian kami serta-merta kehilangan fokus kotak input, sekali gus menyembunyikan papan kekunci.

4. Ringkasan

Sembunyikan papan kekunci lembut amat diperlukan untuk reka bentuk tapak web peranti mudah alih dalam situasi tertentu. Artikel ini memperkenalkan kaedah mengawal paparan dan menyembunyikan papan kekunci lembut melalui jQuery untuk rujukan pembaca. Sudah tentu, terdapat kaedah lain yang juga boleh mencapai kesan menyembunyikan papan kekunci lembut Pembaca boleh memilih kaedah yang sesuai dengan mereka berdasarkan situasi sebenar untuk mencapai matlamat ini.

Atas ialah kandungan terperinci jquery menyembunyikan papan kekunci mudah alih. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!