집 > 기사 > 웹 프론트엔드 > jQuery에서 입력 요소에 초점이 맞춰져 있는지 확인하는 방법은 무엇입니까?

jQuery에서 입력 요소에 초점이 맞춰져 있는지 확인하는 방법은 무엇입니까?

Barbara Streisand원래의: 2024-11-21 09:47:14923검색

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

jQuery를 사용하여 입력에 포커스가 있는지 확인하는 방법

웹사이트의 첫 페이지에는 여러

요소는 CSS :hover 의사 클래스를 사용하여 마우스를 요소 위로 가져갈 때 테두리를 표시합니다. 다음 중 하나입니다

요소에는

jQuery의 도움으로 입력 요소에 포커스가 있을 때 테두리를 유지합니다.

이 설정은 이외의 요소에 :hover를 지원하지 않는 IE6을 제외하고는 완벽하게 작동합니다. 태그. 이 문제를 해결하기 위해 jQuery는 $(#element).hover() 메서드를 사용하여 CSS :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 &amp;&amp; ( 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 &amp;&amp; ( elem.type || elem.href );
        };
    }
})( jQuery );

위 내용은 jQuery에서 입력 요소에 초점이 맞춰져 있는지 확인하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

jquery css if for using class Conditional this display border input issue

성명：

이전 기사：JavaScript 함수의 범위 내에서 변수를 어떻게 검색할 수 있나요?다음 기사：JavaScript 함수의 범위 내에서 변수를 어떻게 검색할 수 있나요?