요소 ID에 포커스가 있는지 어떻게 확인할 수 있습니까?

요소 ID에 포커스가 있는지 어떻게 확인할 수 있습니까?

---

이 질문에 이미 답변이 있습니다.

• 포커스가있는 DOM 요소를 어떻게 알 수 있습니까? 16 답변

특정 조건이 충족 된 후 포커스를받는 다음 div가 있다고 가정 해 보겠습니다.

<div id="myID" tabindex="-1" >Some Text</div>

div에 포커스가 있는지 여부를 확인하는 핸들러를 만들고 true / focus가 div에있는 것으로 평가되면 뭔가를 수행합니다 (아래 예제에서는 콘솔 로그를 인쇄합니다).

if (document.getElementById('#myID').hasFocus()) {
            $(document).keydown(function(event) {
                if (event.which === 40) {
                    console.log('keydown pressed')
                }
            });
        }

콘솔에 다음과 같은 오류 메시지가 나타납니다.

TypeError : null의 'hasFocus'속성을 읽을 수 없습니다.

내가 여기서 뭘 잘못하고 있는지 아십니까? 내가 div ID를 전달하는 방식일까요?

---

document.activeElement초점을 확인하려는 요소와 비교하십시오 . 동일하면 요소에 초점이 맞춰집니다. 그렇지 않으면 그렇지 않습니다.

// dummy element
var dummyEl = document.getElementById('myID');

// check for focus
var isFocused = (document.activeElement === dummyEl);

hasFocus의 일부입니다 document; DOM 요소에는 이러한 방법이 없습니다.

또한 시작 부분에 document.getElementByIda #를 사용하지 마십시오 myID. 이것을 변경하십시오 :

var dummyEl = document.getElementById('#myID');

이에:

var dummyEl = document.getElementById('myID');

대신 CSS 쿼리를 사용하려면 querySelector(및 querySelectorAll)를 사용할 수 있습니다 .

---

jquery를 사용하려는 경우 $("..").is(":focus").

이 스택을 살펴볼 수 있습니다.

---

사용하다 document.activeElement

작동해야합니다.

PS getElementById("myID")아닙니다getElementById("#myID")

---

이것은 블록 요소입니다. 포커스를받을 수 있으 tabindex려면 다음과 같이 속성을 추가해야합니다 .

<div id="myID" tabindex="1"></div>

Tabindex를 사용하면이 요소가 포커스를받을 수 있습니다. tabindex="-1"이 동작을 허용하지 않으려면 사용 (또는 실제로 속성을 모두 함께 제거)하십시오.

그런 다음 간단히

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

또는

$(document.activeElement)

이전에 제안 된대로.

---

스크립트에서 아래 코드를 작성하고 jQuery 라이브러리도 추가하십시오.

var getElement = document.getElementById('myID');

if (document.activeElement === getElement) {
        $(document).keydown(function(event) {
            if (event.which === 40) {
                console.log('keydown pressed')
            }
        });
    }

Thank you...

참고URL : https://stackoverflow.com/questions/36430561/how-can-i-check-if-my-element-id-has-focus