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

질문 : jQuery를 사용하여 입력에 포커스가 있는지 테스트

---

내가 구축중인 사이트의 첫 페이지에서 여러 <div> 는 CSS :hover 가상 클래스를 사용하여 마우스가 위에있을 때 테두리를 추가합니다. <div> 중 하나에는 jQuery를 사용하여 입력에 포커스가있는 경우 테두리를 유지 <form> <a> 이외의 요소에서 :hover 를 지원하지 않는다는 점을 제외하면 완벽하게 작동합니다. 그래서, 우리는 모방 CSS로 jQuery를 사용하는 경우에만이 브라우저 :hover 은 Using $(#element).hover() 방법. 유일한 문제는 이제 jQuery가 focus() 및 hover() 형식을 모두 처리하므로 입력에 포커스가있을 때 사용자가 마우스를 안팎으로 움직이면 테두리가 사라집니다.

이 행동을 막기 위해 어떤 종류의 조건부를 사용할 수 있다고 생각했습니다. 예를 들어 입력에 포커스가있는 경우 마우스 아웃으로 테스트하면 테두리가 사라지는 것을 막을 수 있습니다. AFAIK, :focus 선택기가 없으므로 어떻게해야할지 모르겠습니다. 어떤 아이디어?

답변

---

jQuery 1.6+

jQuery는 :focus 선택기를 추가 했으므로 더 이상 직접 추가 할 필요가 없습니다. $("..").is(":focus")

jQuery 1.5 이하

편집 : 시간이 변경됨에 따라 초점을 테스트하는 더 나은 방법을 찾았습니다 . Ben Alman 의 새로운 요점은 다음과 같습니다.

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

여기 Mathias Bynens에서 인용 :

본문과 같은 오 탐지를 필터링하기 위해 (elem.type || elem.href) 이렇게하면 폼 컨트롤과 하이퍼 링크를 제외한 모든 요소를 필터링 할 수 있습니다.

새로운 선택기를 정의하고 있습니다. 플러그인 / 저작을 참조하십시오. 그런 다음 다음을 수행 할 수 있습니다.

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

또는:

$("input:focus").doStuff();

임의의 jQuery

어떤 요소에 포커스가 있는지 알아 내고 싶다면 다음을 사용할 수 있습니다.

$(document.activeElement)

 

버전이 1.6 이하인지 확실하지 않은 경우 누락 된 경우 :focus

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

출처 : https://stackoverflow.com/questions/967096/using-jquery-to-test-if-an-input-has-focus