Rumah > hujung hadapan web > tutorial js > 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
Lepaskan: 2024-11-15 18:19:02
asal
256 orang telah melayarinya

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")
Salin selepas log masuk

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 );
};
Salin selepas log masuk

Ini membolehkan anda menyemak fokus menggunakan:

if ($("...").is(":focus")) {
  ...
}
Salin selepas log masuk

Semua Versi jQuery

Untuk menentukan elemen mana yang mempunyai fokus pada masa ini:

$(document.activeElement)
Salin selepas log masuk

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 );
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan