자바 스크립트의 초점을 어떻게 정리합니까?


159

나는 그렇게 어렵지 않아야한다는 것을 알고 있지만 Google에서 답을 찾을 수 없습니다.

포커스가있는 요소를 미리 알지 못하고 어떤 요소에서든 포커스를 지우는 자바 스크립트를 실행하고 싶습니다. 최신 브라우저뿐만 아니라 firefox 2에서도 작동해야합니다.

이를 수행하는 좋은 방법이 있습니까?


명확한 초점은 무엇을 의미합니까? -흐림과 동일합니까?
plodder

3
브라우저의 어떤 요소에도 포커스가 없도록 만들고 싶습니다.
Andres

답변:


170

대답: document.activeElement

원하는 것을하려면 document.activeElement.blur()

Firefox 2를 지원해야하는 경우 다음을 사용할 수도 있습니다.

function onElementFocused(e)
{
    if (e && e.target)
        document.activeElement = e.target == document ? null : e.target;
} 

if (document.addEventListener) 
    document.addEventListener("focus", onElementFocused, true);

8
브라우저 공유가 0.66 % 인 Firefox 2가 거래 차단기 인 경우 수정 된 답변이 있습니다.
jps

21
2013 년 Firefox 2의 브라우저 점유율은 0.66 %보다 적으며이 document.activeElement.blur()효과를 얻는 가장 좋은 방법 은 간단 합니다.
chowey

88

.focus()그런 다음 .blur()페이지에 임의의 다른 것이 있습니다. 하나의 요소 만 포커스를 가질 수 있으므로 해당 요소로 전송 된 다음 제거됩니다.


초점이있는 보이지 않는 요소를 만드는 방법이 있습니까?
Andres

1
최선의 방법은 전문가가 아닙니다. 그러나 overflow: clip스타일이 지정된 요소 의 경계 외부 또는 외부에 배치 할 수 있습니다. 그러나 이미 페이지에 존재하는 필드를 사용할 수 있습니다. 또는 목적에 맞게 하나를 작성하고 다시 제거하십시오.
Kevin Reid

화면 외부의 요소에 초점을 설정하면 해당 요소로 강제 스크롤됩니다. 그러나 목적에 따라 보이지 않는 요소를 만들 수 있습니다. 즉, 일부 브라우저는 캐럿을 제거하기가 어려울 수 있습니다. 그냥 blur ()가 더 잘 작동합니다. 키업 (keydown) 이벤트 핸들러를 사용하여 키를 계속 얻을 수 있습니다.
Alexis Wilke 2016 년

5
이 답변은 최신 정보가 아니며 2017 년에는 적용되지 않습니다. stackoverflow.com/a/2520670/39808
Paul Fisher

여전히 작동하고 더 오래 작동하며 포커스를 이동합니다 (TAB 탐색을 방해 할 수 있음). "임의의 다른 것"이 무엇인지 즉시 알 수 없습니다.
user202729

49
document.activeElement.blur();

IE9에서 잘못 작동합니다. 활성 요소가 문서 본문 인 경우 전체 브라우저 창이 흐리게 표시됩니다. 이 경우를 확인하는 것이 좋습니다.

if (document.activeElement != document.body) document.activeElement.blur();

사실이지만 오늘날에는 더 이상 IE9를 사용하는 사람이 거의 없습니다.
Donald Duck

18

선택한 요소의 종류를 알지 못할 수 있으므로 TypeScript를 사용할 때 여기에 제공된 답변 중 완전히 올바른 것은 없습니다.

따라서이 방법이 선호됩니다.

if (document.activeElement instanceof HTMLElement)
    document.activeElement.blur();

결과적으로 흐리게 표현이 공식 사양의 일부가 아니므로 언제든지 깨질 수 있으므로 허용 된 답변에 제공된 솔루션을 사용하지 않는 것이 좋습니다.


6
2010 년에 제가 물었던 질문이 어떻게 계속 진화하고 있는지를 보는 것은 재밌습니다.
Andres

2

dummyElem.focus () 여기서 dummyElem은 숨겨진 객체입니다 (예 : 음의 zIndex가 있습니까)?


0

window.focus ();를 호출 할 수 있습니다.

그러나 포커스를 이동하거나 잃는 것은 탭 키를 사용하여 페이지를 돌아 다니는 사람을 방해 할 수밖에 없습니다.

키 코드 13을 듣고 탭 키를 누르면 효과가 사라질 수 있습니다.


-3

jQuery를 사용하면 다음과 같습니다. $(this).blur();


2
이것은 오래된 답변이므로 지금까지 알 수 있지만이 답변이 적용되지 않는 두 가지 이유가 있습니다. 1. OP가 jquery를 사용하고 있다고 가정하고, 2. this초점이 맞춰진 요소가되어야하지만 질문은 OP가 초점을 맞춘 요소를 미리 알지 못한다고 명시 적으로 나타냅니다.
Brandon
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.