[javascript] jQuery로 초점을 맞춘 요소를 얻는 방법?

JAVASCRIPT / 글쓴이

jQuery를 사용하여 캐럿 (커서) 포커스가있는 입력 요소를 어떻게 얻을 수 있습니까?

즉, 입력에 캐럿의 초점이 있는지 확인하는 방법은 무엇입니까?

답변

// Get the focused element:
var $focused = $(':focus');

// No jQuery:
var focused = document.activeElement;

// Does the element have focus:
var hasFocus = $('foo').is(':focus');

// No jQuery:
elem === elem.ownerDocument.activeElement;

어느 것을 사용해야합니까? jQuery 문서를 인용 :

다른 의사 클래스 선택기 ( “:”로 시작하는 선택기)와 마찬가지로 태그 이름이나 다른 선택기가있는 focus를 사용하는 것이 좋습니다. 그렇지 않으면 범용 선택기 ( “*”)가 내포됩니다. 즉, 베어는와 $(':focus')같습니다 $('*:focus'). 현재 초점을 맞춘 요소를 찾고 있다면 $ (document.activeElement)는 전체 DOM 트리를 검색하지 않고도 요소를 검색합니다.

정답은:

document.activeElement

그리고 요소를 래핑하는 jQuery 객체를 원한다면 :

$(document.activeElement)

답변

$( document.activeElement )

jQuery 문서 에서 권장하는대로 전체 DOM 트리를 검색하지 않고도 검색합니다.

답변

Firefox, Chrome, IE9 및 Safari에서 두 가지 방법을 테스트했습니다.

(1). $(document.activeElement)Firefox, Chrome 및 Safari에서 예상대로 작동합니다.

(2). $(':focus')Firefox 및 Safari에서 예상대로 작동합니다.

마우스로 이동하여 ‘name’을 입력하고 키보드에서 Enter 키를 누른 다음 초점을 맞춘 요소를 얻으려고했습니다.

(1). $(document.activeElement)Firefox, Chrome 및 Safari에서 예상대로 input : text : name을 반환하지만 IE9에서는 input : submit : addPassword를 반환합니다.

(2). $(':focus')Firefox 및 Safari에서 예상대로 input : text : name을 반환하지만 IE에서는 아무것도 반환하지 않습니다.

<form action="">
    <div id="block-1" class="border">
        <h4>block-1</h4>
        <input type="text" value="enter name here" name="name"/>
        <input type="button" value="Add name" name="addName"/>
    </div>
    <div id="block-2" class="border">
        <h4>block-2</h4>
        <input type="text" value="enter password here" name="password"/>
        <input type="submit" value="Add password" name="addPassword"/>
    </div>
</form>

답변

이 시도:

$(":focus").each(function() {
    alert("Focused Elem_id = "+ this.id );
});

답변

아무도 언급하지 않았습니다 ..

document.activeElement.id

IE8을 사용하고 있으며 다른 브라우저에서 테스트하지 않았습니다. 필자의 경우 필드를 최소 4 자 이상으로 설정하고 동작 전에 초점을 맞추는 데 사용합니다. 네 번째 숫자를 입력하면 트리거됩니다. 필드의 ID는 ‘년’입니다. 사용 중입니다 ..

if( $('#year').val().length >= 4 && document.activeElement.id == "year" ) {
    // action here
}

답변

$(':focus')[0] 실제 요소를 제공합니다.

$(':focus') 요소 배열을 제공합니다. 일반적으로 한 번에 하나의 요소 만 초점을 맞추므로 여러 요소에 초점을 맞춘 경우에만 더 좋습니다.

답변

이 시도::

$(document).on("click",function(){
    alert(event.target);
    });