Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimanakah Saya Boleh Mengesan Fokus Input untuk Kesan Hover Dinamik dengan JQuery Merentas Versi Penyemak Imbas Berbeza?

Bagaimanakah Saya Boleh Mengesan Fokus Input untuk Kesan Hover Dinamik dengan JQuery Merentas Versi Penyemak Imbas Berbeza?

Linda Hamilton
Linda Hamiltonasal
2024-11-15 18:19:02171semak imbas

How Can I Reliably Detect Input Focus for Dynamic Hover Effects with jQuery Across Different Browser Versions?

Memanfaatkan jQuery untuk Mengesan Fokus Input untuk Kesan Tuding Dinamik

Apabila mereka bentuk antara muka pengguna, adalah penting untuk mempertimbangkan keserasian merentas penyemak imbas. Walaupun kesan hover menggunakan CSS :hover berfungsi dengan lancar dalam kebanyakan penyemak imbas moden, IE6 menimbulkan cabaran kerana ia hanya menyokong :hover pada teg sauh (). Untuk menangani perkara ini, jQuery menawarkan kaedah hover() sebagai penyelesaian. Walau bagaimanapun, kaedah ini bercanggah dengan acara fokus() jQuery apabila digunakan pada elemen yang mengandungi input.

Untuk mengatasi halangan ini, kita boleh melaksanakan logik bersyarat untuk mengelakkan sempadan daripada hilang apabila pengguna mengarahkan tetikus pada input dengan fokus. Malangnya, jQuery tidak mempunyai pemilih :focus, mendorong carian untuk penyelesaian alternatif.

jQuery 1.6 dan Ke Atas

Dalam jQuery 1.6, pemilih :focus telah diperkenalkan, memudahkan tugas. Hanya gunakan kod:

$("..").is(":focus")

jQuery 1.5 dan Di Bawah

Untuk versi terdahulu jQuery, anda boleh menentukan pemilih tersuai:

jQuery.expr[':'].focus = function( elem ) {
  return elem === document.activeElement && ( elem.type || elem.href );
};

Ini membolehkan anda menyemak fokus menggunakan:

if ($("...").is(":focus")) {
  ...
}

Semua Versi jQuery

Untuk menentukan elemen mana yang mempunyai fokus pada masa ini:

$(document.activeElement)

Keserasian Merentas Versi

Jika tidak pasti versi jQuery, semak sama ada pemilih :focus wujud. Jika tidak, tambahkannya secara manual:

(function ( $ ) {
    var filters = $.expr[":"];
    if ( !filters.focus ) { 
        filters.focus = function( elem ) {
           return elem === document.activeElement && ( elem.type || elem.href );
        };
    }
})( jQuery );

Dengan melaksanakan penyelesaian ini, anda boleh memastikan interaksi fokus input berkelakuan secara konsisten merentas penyemak imbas.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengesan Fokus Input untuk Kesan Hover Dinamik dengan JQuery Merentas Versi Penyemak Imbas Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn