首頁 >web前端 >js教程 >jQuery 中如何決定輸入元素是否獲得焦點?

jQuery 中如何決定輸入元素是否獲得焦點?

Barbara Streisand
Barbara Streisand原創
2024-11-21 09:47:141009瀏覽

How to Determine if an Input Element is Focused in jQuery?

如何使用jQuery 確定輸入是否聚焦

在網站的首頁中,多個

元素使用CSS :hover 偽類在滑鼠懸停在元素上時顯示邊框。其中一個
是元素包含一個
在 jQuery 的幫助下,當任何輸入元素獲得焦點時,它都會保持邊框。

此設定工作完美,但在 IE6 中除外,IE6 不支援 :hover 在 以外的元素上。標籤。為了解決這個問題,使用 jQuery 來模仿 CSS :hover 使用 $(#element).hover() 方法。

但是,當 jQuery 同時處理表單的 focus() 和 hover() 時,就會出現問題。當輸入元素獲得焦點並且使用者將滑鼠移入和移出時,邊框會消失。

要解決此問題,請考慮使用條件語句。例如,透過檢查是否有任何輸入聚焦於滑鼠移出事件,可以防止邊框消失。由於 jQuery 缺少 :focus 選擇器,因此需要探索替代方法。

jQuery 1.6

jQuery 1.6 引進了 :focus 選擇器,消除了自訂實作的需要。只要使用:

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

jQuery 1.5 及以下

已經出現了測試焦點的新方法,包括 Ben Alman的實作:

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

這定義了一個自訂選擇器,允許使用例如:

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

任何jQuery 版本

用於檢索目前聚焦的元素:

$(document.activeElement)

確保與jQuery 版本1.6相容以下:

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

以上是jQuery 中如何決定輸入元素是否獲得焦點?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn