首頁 > web前端 > js教程 > 如何使用 jQuery 檢測輸入焦點並防止滑鼠移出時邊框移除?

如何使用 jQuery 檢測輸入焦點並防止滑鼠移出時邊框移除?

Susan Sarandon
發布: 2024-11-29 02:50:10
原創
396 人瀏覽過

How Can I Use jQuery to Detect Input Focus and Prevent Border Removal on Mouse Out?

使用jQuery 確定輸入焦點並防止邊框移除

為了實現跨瀏覽器相容性,使用jQuery 的.hover () 模仿CSS 的:hover on non- 方法Internet Explorer 6 中的元素導致了一個不可預見的問題。當這些

之一內的輸入獲得焦點時,由 .hover() 方法建立的邊框會在滑鼠移開時消失。

為了解決此問題,我們試圖確定是否有任何輸入獲得焦點滑鼠移出。由於 jQuery 缺少 :focus 選擇器,因此需要替代方法。

jQuery 1.6 以上

jQuery 1.6 包含一個 :focus 選擇器,無需自訂實作。只需使用 $("..").is(":focus") 來檢查聚焦輸入。

jQuery 1.5 及以下

對於早期的 jQuery 版本,建議定義一個自訂 :focus 選擇器。這可以透過以下方式實現:

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

這確保只有表單控制項和超連結被視為焦點。

或者,您可以使用:

if ($("...").is(":focus")) { ... }
登入後複製

或:

$("input:focus").doStuff();
登入後複製

所有jQuery版本

要確定🎜>要確定🎜>要確定🎜>要確定🎜>要確定🎜>要確定🎜>要確定🎜>要確定🎜>要確定🎜>要確定🎜>要確定🎜>要確定🎜>要確定🎜>要確定🎜>要確定🎜>要確定🎜>哪個元素具有焦點,無論jQuery版本如何,請使用:

$(document.activeElement)
登入後複製

檢查是否缺少:focus 選擇器

如果您不確定jQuery 版本,可以添加:focus 選擇器手動:

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

透過採用這些技術,您可以維持所需的邊框行為,同時適應瀏覽器特定的限制。

以上是如何使用 jQuery 檢測輸入焦點並防止滑鼠移出時邊框移除?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板