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

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

구축하고 있는 의 첫 개의 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」<div> CSS를 합니다.:hover: 위에 때 합니다.의 <div>에는 는음음음음음 a a a a a a가 포함되어 .<form>jQuery를 사용하여 입력에 포커스가 있는 경우 테두리를 유지합니다.은, 「IE6」를 않는 것을 하고, 합니다.:hover'외의 '<a>s.하여 CSS를 .:hover$(#element).hover()유일한는 jQuery가 두 형식을 모두 처리한다는 입니다.focus() ... hover()입력에 포커스가 있으면 사용자가 마우스를 안팎으로 움직이면 테두리가 사라집니다.

어느 의 입력에 있는지 를 조사했을 , 없어지는 수 .예를 들어, 마우스 아웃으로 테스트한 입력 중 포커스가 있는 입력이 있으면 테두리가 사라지지 않도록 할 수 있습니다. AFAIK는 .:focusj쿼리★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★은은생 각각?

jQuery 1.6 이상

jQuery가 셀렉터를 추가했기 때문에 직접 추가할 필요가 없습니다.그냥 사용하다$("..").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않은 1.6을 할 수 .:focus"CHANGE: " "CHANGE: "CHANGE:

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

CSS:

.focus {
    border-color:red;
}

JQuery:

  $(document).ready(function() {

    $('input').blur(function() {
        $('input').removeClass("focus");
      })
      .focus(function() {
        $(this).addClass("focus")
      });
  });

다음은 현재 받아들여지고 있는 답변보다 더 강력한 답변입니다.

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

에 주의:(elem.type || elem.href)다음과 같은 잘못된 긍정을 걸러내기 위해 테스트가 추가되었습니다.body이렇게 하면 폼 컨트롤과 하이퍼링크를 제외한 모든 요소를 필터링할 수 있습니다.

(Ben Alman이 이 요지에서 인용)

2015년 4월 갱신

, 에, 는 이 에 대해 생각합니다..live이치노

그 in, in는.on이치노

그 문서는 그 구조를 설명하는 데 매우 유용하다.

.on() 메서드는 jQuery 오브젝트 내의 현재 선택된 요소 세트에 이벤트핸들러를 부가합니다.jQuery 1.7에서 .on() 메서드는 이벤트핸들러 접속에 필요한 모든 기능을 제공합니다.이전 jQuery 이벤트 메서드에서 변환하는 방법은 .bind(), .delegate() 및 .live()를 참조하십시오.

따라서 '입력 집중' 이벤트를 대상으로 하기 위해 스크립트에서 이를 사용할 수 있습니다.예를 들어 다음과 같습니다.

$('input').on("focus", function(){
   //do some stuff
});

이 기능은 매우 강력하며 Tab 키도 사용할 수 있습니다.

무엇을 원하는지는 잘 모르겠지만 입력 요소(또는 div?)의 상태를 변수로 저장하면 얻을 수 있는 것처럼 들립니다.

$('div').each(function(){

    var childInputHasFocus = false;

    $(this).hover(function(){
        if (childInputHasFocus) {
            // do something
        } else { }
    }, function() {
        if (childInputHasFocus) {
            // do something
        } else { }
    });

    $('input', this)
        .focus(function(){
            childInputHasFocus = true;
        })
        .blur(function(){
            childInputHasFocus = false;
        });
});

클래스를 사용하여 요소 상태를 표시하는 대신 내부 데이터 저장소 기능을 사용할 수 있습니다.

할 수 .data() :)스트링뿐만이 아닙니다.

$("...").mouseover(function ()
{
    // store state on element
}).mouseout(function ()
{
    // remove stored state on element
});

그리고 요소의 상태에 접근하는 것이 중요합니다.

당장 수 더 , '아주 좋은 방법'이 있을 것이다.$(foo).focus(...)

http://api.jquery.com/focus/

mouseOver와 마우스를 사용하는 것에 대해 생각해 본 적이 있습니까?시뮬레이션을 실시합니다.mouse Enter 및 mouse Leave도 조사합니다.

양쪽 상태(정지, 포커스)를 true/false 플래그로 추적하고 둘 다 false이면 경계를 삭제하고 그렇지 않으면 경계를 표시하는 함수를 실행합니다.

즉, 포커스 세트 포커스 = 참, 포커스 세트 포커스 세트 포커스 = 거짓입니다.onmouseover 집합은 = true, onmouseout 집합은 = false를 맴돌았습니다.각 이벤트가 끝나면 테두리를 추가/제거하는 기능을 실행합니다.

제가 알기로는, 화면에 포커스가 있는 입력이 있는지 브라우저에 물어볼 수 없습니다. 포커스 트래킹을 설정해야 합니다.

나는 보통 "noFocus"라는 변수를 가지고 그것을 true로 설정합니다.그런 다음 noFocus를 false로 만드는 모든 입력에 포커스 이벤트를 추가합니다.그런 다음 noFocus를 true로 되돌리는 모든 입력에 흐릿한 이벤트를 추가합니다.

이 작업을 쉽게 처리할 수 있는 MoTools 클래스가 있습니다.jquery 플러그인을 만들어 같은 작업을 할 수 있을 것입니다.

작성한 후에는 보더 스와프를 수행하기 전에 noFocus를 체크할 수 있습니다.

:selected는 없지만 :selected http://docs.jquery.com/Selectors/selected는 있습니다.

그러나 선택한 내용에 따라 사물의 모양을 바꾸고 싶다면 흐릿한 이벤트를 처리해야 합니다.

http://docs.jquery.com/Events/blur

요소의 포커스를 확인하는 플러그인이 있습니다.http://plugins.jquery.com/project/focused

$('input').each(function(){
   if ($(this) == $.focused()) {
      $(this).addClass('focused');
   }
})

사용자가 새 값을 입력하기 전에 텍스트 입력 내용을 선택할 필요가 없도록 .live("focus") 이벤트를 선택()(강조표시)하도록 설정했습니다.

$(formObj).선택();

브라우저 간의 기호가 다르기 때문에 선택한 내용이 클릭으로 대체될 수 있으며 텍스트 필드 내에 커서를 놓기 위해 바로 내용이 선택 취소될 수 있습니다(대부분 FF에서는 정상적으로 작동하지만 IE에서는 실패).

선택을 조금 늦추면 해결할 수 있을 것 같아서...

set Timeout(function(){$(formObj).선택();},200);

이 작업은 정상적으로 진행되어 셀렉트는 계속 진행됩니다만, 재미있는 문제가 발생했습니다.한 필드에서 다음 필드로 탭할 경우 포커스가 선택되기 전에 다음 필드로 전환됩니다.select는 포커스를 훔치기 때문에 포커스는 뒤로 돌아가 새로운 "포커스" 이벤트를 트리거합니다.그 결과 화면 전체에 셀렉트된 입력이 연속적으로 춤을 추게 되었습니다.

실행 가능한 해결책은 선택()을 실행하기 전에 필드에 아직 포커스가 있는지 확인하는 것입니다만, 전술한 바와 같이 간단하게 확인할 수 있는 방법은 없습니다.jQuery select() 호출을 서브루틴으로 가득 찬 큰 함수로 바꾸는 대신 자동 하이라이트만 생략했습니다.

마지막으로 jQuery focus() 함수 내에서 추가 및 삭제되는 .elementhasfocus라는 임의의 클래스를 만듭니다.마우스 아웃 시 hover() 함수가 실행되면 .element hasfocus:

if(!$("#quotebox").is(".boxhasfocus")) $(this).removeClass("box_border");

따라서 해당 클래스가 없는 경우(div 내에 포커스가 있는 요소가 없음) 테두리가 제거됩니다.그렇지 않으면 아무 일도 일어나지 않습니다.

간단하죠.

 <input type="text" /> 



 <script>
     $("input").focusin(function() {

    alert("I am in Focus");

     });
 </script>

언급URL : https://stackoverflow.com/questions/967096/using-jquery-to-test-if-an-input-has-focus