질문자 :Tony Peterson
JavaScript에서 현재 포커스가 있는 요소를 찾고 싶습니다. DOM을 살펴보았지만 아직 필요한 것을 찾지 못했습니다. 이 작업을 수행하는 방법과 방법이 있습니까?
내가 이것을 찾고 있었던 이유:
나는 화살표와 같은 키를 만들려고 enter 입력 요소의 테이블을 통해 이동합니다. 이제 탭이 작동하지만 Enter 키를 누르면 기본적으로 화살표가 표시되지 않습니다. 키 처리 부분을 설정했지만 이제 이벤트 처리 기능에서 포커스를 이동하는 방법을 알아내야 합니다.
document.activeElement 사용하세요. 모든 주요 브라우저에서 지원됩니다.
이전에는 어떤 양식 필드에 포커스가 있는지 찾으려고 하면 찾을 수 없었습니다. 이전 브라우저 내에서 감지를 에뮬레이트하려면 모든 필드에 "포커스" 이벤트 핸들러를 추가하고 변수에 마지막으로 초점을 맞춘 필드를 기록하십시오. 마지막 초점 필드에 대한 흐림 이벤트 시 변수를 지우려면 "흐림 처리" 처리기를 추가하십시오.
activeElement 를 제거해야 하는 경우 blur를 사용할 수 있습니다. document.activeElement.blur() . activeElement 를 body 변경합니다.
관련된 링크들:
JW가 말했듯이 적어도 브라우저 독립적인 방식으로 현재 집중된 요소를 찾을 수 없습니다. 그러나 앱이 IE 전용인 경우(일부는...) 다음과 같은 방법으로 찾을 수 있습니다.
document.activeElementIE가 결국 모든 것이 잘못된 것은 아닌 것 같습니다. 이것은 HTML5 초안의 일부이며 최소한 최신 버전의 Chrome, Safari 및 Firefox에서 지원되는 것 같습니다.
jQuery를 사용할 수 있다면 이제 :focus를 지원합니다. 버전 1.6 이상을 사용하고 있는지 확인하십시오.
이 명령문은 현재 초점을 맞춘 요소를 가져옵니다.
$(":focus")document.activeElement 는 이제 HTML5 작업 초안 사양의 일부이지만 일부 비주요/모바일/이전 브라우저에서는 아직 지원되지 않을 수 있습니다. querySelector 로 대체할 수 있습니다(지원되는 경우). 또한 것을 언급 할만큼 가치의 document.activeElement 리턴 document.body 어떤 요소가 집중되지 않는 경우 - 브라우저 창에 포커스가없는 경우에도.
다음 코드는 이 문제를 해결하고 약간 더 나은 지원을 제공하는 querySelector
var focused = document.activeElement; if (!focused || focused == document.body) focused = null; else if (document.querySelector) focused = document.querySelector(":focus"); 주목해야 할 추가 사항은 이 두 가지 방법 간의 성능 차이입니다. 선택기를 사용하여 문서를 쿼리하는 것은 항상 activeElement 속성에 액세스하는 것보다 훨씬 느립니다. 이 jsperf.com 테스트를 참조하십시오.
자체로 document.activeElement 문서가 집중되지 않는 경우 여전히 요소를 반환 할 수 있습니다 (그리고 문서에 따라서 아무것도 집중되지 않습니다!)
그 동작을 원할 수도 있고 중요하지 않을 수도 있습니다 keydown 이벤트 내에서). 그러나 실제로 초점이 맞춰진 무언가를 알아야 하는 경우document.hasFocus() 추가로 확인할 수 있습니다.
다음은 포커스가 있는 요소가 있는 경우 또는 그렇지 않은 경우 null 합니다.
var focused_element = null; if ( document.hasFocus() && document.activeElement !== document.body && document.activeElement !== document.documentElement ) { focused_element = document.activeElement; }특정 요소에 포커스가 있는지 확인하려면 더 간단합니다.
var input_focused = document.activeElement === input && document.hasFocus();포커스가 있는 항목 이 있는지 확인하려면 다시 더 복잡합니다.
var anything_is_focused = ( document.hasFocus() && document.activeElement !== null && document.activeElement !== document.body && document.activeElement !== document.documentElement ); 견고성 참고 document.body 및 document.documentElement 에 대해 검사하는 코드에서 이는 일부 브라우저에서 포커스가 없는 경우 이 중 하나를 반환하거나 null
<body> (또는 <html> )에 tabIndex 속성 이 있어서 실제로 포커스 를 받을 수 있는지 여부는 고려하지 않습니다. 라이브러리나 무언가를 작성 중이고 강력하기를 원한다면 어떻게든 처리해야 합니다.
다음은 개념적으로 더 많이 단락에 대해 알고 에서요해야하기 때문에 복잡 포커스 요소를 얻기의 (무거운 airquotes) "한 줄"버전은, 그것은 분명히 당신을 가정 한 줄에 맞지 않는 읽을 수 있기를 원합니다.
나는 이것을 추천하지 않을 것이다. 하지만 당신이 1337 hax0r이라면, idk... 거기에 있습니다.
|| null 경우에 따라 false 를 얻는 것을 신경 쓰지 않는다면 || null document.activeElement 가 null 경우 null 얻을 수 있음):
var focused_element = ( document.hasFocus() && document.activeElement !== document.body && document.activeElement !== document.documentElement && document.activeElement ) || null;특정 요소에 포커스가 있는지 확인 하기 위해 또는 이벤트를 사용할 수 있지만 이 방법은 설정(및 잠재적으로 분해)이 필요하고 중요하게 는 초기 상태를 가정합니다 .
var input_focused = false; input.addEventListener("focus", function() { input_focused = true; }); input.addEventListener("blur", function() { input_focused = false; });이벤트가 발생하지 않는 방식을 사용하여 초기 상태 가정을 수정할 수 있지만 대신 이를 사용할 수도 있습니다.
document.activeElement 는 포커스 가능한 요소가 없는 경우 <body> 요소로 설정될 수 있습니다. 또한 요소에 초점이 activeElement 는 계속해서 초점이 맞춰진 요소를 유지합니다.
이 두 동작 중 하나가 바람직하지 않은 경우 CSS 기반 접근 방식을 고려하십시오. document.querySelector( ':focus' ) .
Mootools에서 이러한 목적으로 사용한 작은 도우미:
FocusTracker = { startFocusTracking: function() { this.store('hasFocus', false); this.addEvent('focus', function() { this.store('hasFocus', true); }); this.addEvent('blur', function() { this.store('hasFocus', false); }); }, hasFocus: function() { return this.retrieve('hasFocus'); } } Element.implement(FocusTracker); 이렇게 하면 주어진 요소에서 startFocusTracking() el.hasFocus() 하여 요소에 포커스가 있는지 확인할 수 있습니다.
현재 포커스가 있는 요소를 확인하려고 할 때 다음 스니펫이 유용하다는 것을 알았습니다. 다음을 브라우저 콘솔에 복사하면 매초 포커스가 있는 현재 요소의 세부 정보가 인쇄됩니다.
setInterval(function() { console.log(document.querySelector(":focus")); }, 1000); 전체 요소를 인쇄해도 요소를 정확히 찾아내는 데 도움이 되지 않는 경우 정확한 요소를 찾아내는 데 도움이 되도록 다른 항목을 로그아웃 console.log 를 자유롭게 수정하십시오.
나는 Joel S가 사용한 접근 방식을 좋아했지만 document.activeElement 의 단순함도 좋아합니다. jQuery를 사용하고 둘을 결합했습니다. document.activeElement 를 지원하지 않는 이전 브라우저는 jQuery.data() 를 사용하여 'hasFocus' 값을 저장합니다. 최신 브라우저는 document.activeElement 를 사용합니다. document.activeElement 가 더 나은 성능을 가질 것이라고 가정합니다.
(function($) { var settings; $.fn.focusTracker = function(options) { settings = $.extend({}, $.focusTracker.defaults, options); if (!document.activeElement) { this.each(function() { var $this = $(this).data('hasFocus', false); $this.focus(function(event) { $this.data('hasFocus', true); }); $this.blur(function(event) { $this.data('hasFocus', false); }); }); } return this; }; $.fn.hasFocus = function() { if (this.length === 0) { return false; } if (document.activeElement) { return this.get(0) === document.activeElement; } return this.data('hasFocus'); }; $.focusTracker = { defaults: { context: 'body' }, focusedElement: function(context) { var focused; if (!context) { context = settings.context; } if (document.activeElement) { if ($(document.activeElement).closest(context).length > 0) { focused = document.activeElement; } } else { $(':visible:enabled', context).each(function() { if ($(this).data('hasFocus')) { focused = this; return false; } }); } return $(focused); } }; })(jQuery);JQuery는 :focus 의사 클래스를 지원합니다. JQuery 문서에서 찾고 있다면 W3C CSS 문서 를 가리키는 "선택기" 아래를 확인하십시오. Chrome, FF 및 IE 7+에서 테스트했습니다. IE에서 작동 <!DOCTYPE... 이 html 페이지에 있어야 합니다. 다음은 포커스가 있는 요소에 ID를 할당했다고 가정하는 예입니다.
$(":focus").each(function() { alert($(this).attr("id") + " has focus!"); });Element 인스턴스인 객체를 얻으려면 document.activeElement 를 사용해야 Text 인스턴스인 객체를 얻으려면 document.getSelection().focusNode 합니다.
도움이 되기를 바랍니다.
jQuery를 사용하는 경우 이를 사용하여 요소가 활성 상태인지 확인할 수 있습니다.
$("input#id").is(":active");document.activeElement를 사용하는 데 잠재적인 문제가 있습니다. 고려하다:
<div contentEditable="true"> <div>Some text</div> <div>Some text</div> <div>Some text</div> </div>사용자가 내부 div에 초점을 맞추면 document.activeElement는 여전히 외부 div를 참조합니다. document.activeElement를 사용하여 내부 div 중 포커스가 있는 div를 결정할 수 없습니다.
다음 함수는 이 문제를 해결하고 초점이 맞춰진 노드를 반환합니다.
function active_node(){ return window.getSelection().anchorNode; }초점을 맞춘 요소를 얻으려면 다음을 사용하십시오.
function active_element(){ var anchor = window.getSelection().anchorNode; if(anchor.nodeType == 3){ return anchor.parentNode; }else if(anchor.nodeType == 1){ return anchor; } }다른 답변을 읽고 직접 시도해 보면 document.activeElement 가 대부분의 브라우저에서 필요한 요소를 제공하는 것 같습니다.
주변에 jQuery가 있는 경우 document.activeElement를 지원하지 않는 브라우저가 있는 경우 이와 같이 매우 간단한 것으로 모든 포커스 이벤트에 이를 채울 수 있어야 합니다. ):
if (typeof document.activeElement === 'undefined') { // Check browser doesn't do it anyway $('*').live('focus', function () { // Attach to all focus events using .live() document.activeElement = this; // Set activeElement to the element that has been focussed }); }dojo를 사용하면 dijit.getFocus()를 사용할 수 있습니다.
내가 결국 생각해 낸 솔루션을 제공하기 위해 이것을 여기에 둡니다.
document.activeInputArea라는 속성을 만들고 jQuery의 HotKeys 애드온을 사용하여 화살표 키, 탭 및 Enter에 대한 키보드 이벤트를 트랩하고 입력 요소를 클릭하기 위한 이벤트 핸들러를 만들었습니다.
그런 다음 포커스가 변경될 때마다 activeInputArea를 조정하여 해당 속성을 사용하여 내가 어디에 있는지 확인할 수 있었습니다.
시스템에 버그가 있고 초점이 생각했던 위치에 있지 않으면 올바른 초점을 복원하기가 매우 어렵기 때문에 이것을 망쳐놓기는 쉽습니다.
출처 : http:www.stackoverflow.com/questions/497094/how-do-i-find-out-which-dom-element-has-the-focus
| SQL은 열에 최대 값이 있는 행만 선택합니다. (0) | 2022.03.17 |
|---|---|
| Xcode 4에서 "기존 프레임워크를 추가"하는 방법은 무엇입니까? (0) | 2022.03.17 |
| 관계형 데이터베이스에 계층적 데이터를 저장하기 위한 옵션은 무엇입니까? (0) | 2022.03.17 |
| 목록을 정렬하는 방법<T> 객체의 속성에 의해 (0) | 2022.03.07 |
| 분기가 지정되지 않은 "git push"의 기본 동작 (0) | 2022.03.07 |