DocumentOrShadowRoot.activeElement

activeElement 속성은 Document 객체 및 ShadowRoot 인터페이스의 읽기 전용 속성으로 현재 포커스가 활성화된 DOM 또는 쉐도우 DOM Element 개체를 가져온다. 이 속성은 DocumentOrShadowRoot mixin 에 상속된다.

Often activeElement 속성은 주로 호출 시점에 <input> 요소나 <textarea> 요소가 선택될 경우에 가져오게 된다. 더 자세하게 선택한 범위를 요소의 selectionStart 속성과 selectionEnd 속성으로 가져올 수 있거나, 현재 선택중인 <select> 요소 및 type 특성이 "button", "checkbox", 또는 "radio" 로 선택된 <input> 요소가 선택된다.

일반적으로 사용자는 탭 키를 통해 포커스 가능한 요소를 이동하며, 공백 키를 통해 일련의 활성화(버튼을 누루거나, 체크박스 및 라디오 활성화 등)를 수행할 것이다. 플랫폼 또는 브라우저의 설정에 따라 요소가 포커스 가능 여부가 달라지는데, macOS의 경우 사용자 입력 요소의 경우 사용자가 직접 입력하지 않으면 기본적으로 포커스가 비활성화 되어 있다.

참고: 포커스 (주로 사용자 입력 가능한 요소)는 사용자가 문서를 선택한 범위(사용자 텍스트 선택으로 인한 강조 부분)와 무관하다. 사용자가 선택한 부분을 가져오려면, window.getSelection() 메소드를 사용하면 된다.

만약 포커스 가능한 요소가 없다면, 현재 활성화 중인 <body> 요소 또는 null을 가져오게 된다.

문법

var element = DocumentOrShadowRoot.activeElement

Value

포커스 활성화 된 Element 개체가 반환된다, 포커스 요소가 없다면 <body> 요소 또는 null 값이 반환된다.

예제

HTML

<p>아래 텍스트 박스를 골라 입력해 보시오.</p>

<form>
  <textarea name="ta-example-one" id="ta-example-one" rows="7" cols="40">텍스트 박스 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.</textarea>
  <textarea name="ta-example-two" id="ta-example-two" rows="7" cols="40">텍스트 박스 2. Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.</textarea>
</form>

<p>활성화된 요소 ID: <b id="output-element"></b></p>
<p>활성화된 요소 내용: <b id="output-text"></b></p>

JavaScript

function onMouseUp(e) {
  const activeTextarea = document.activeElement;
  const selection = activeTextarea.value.substring(
    activeTextarea.selectionStart, activeTextarea.selectionEnd
  );

  const outputElement = document.getElementById('output-element');
  const outputText = document.getElementById('output-text');
  outputElement.innerHTML = activeTextarea.id;
  outputText.innerHTML = selection;
}

const textarea1 = document.getElementById('ta-example-one');
const textarea2 = document.getElementById('ta-example-two');
textarea1.addEventListener('mouseup', onMouseUp, false);
textarea2.addEventListener('mouseup', onMouseUp, false);

Result

규격

Specification Status Comment
HTML Living Standard
The definition of 'activeElement' in that specification.
Living Standard
Shadow DOM
The definition of 'DocumentOrShadowRoot' in that specification.
Obsolete Extension to add activeElement to ShadowRoot

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
activeElement
Experimental
Chrome Full support 53Edge Full support YesFirefox Full support 63IE Full support YesOpera Full support 40Safari Full support YesWebView Android Full support 53Chrome Android Full support 53Firefox Android Full support 63Opera Android Full support 41Safari iOS Full support YesSamsung Internet Android Full support 6.0

Legend

Full support  
Full support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.