Returns the currently focused element, that is, the element that will get keystroke events if the user types any. This attribute is read only.
Often this will return an {{HTMLElement("input")}} or {{HTMLElement("textarea")}} object, if it has the text selection at the time. If so, you can get more detail by using the element's selectionStart and selectionEnd properties. Other times the focused element might be a {{HTMLElement("select")}} element (menu) or an {{HTMLElement("input")}} element, of type button, checkbox or radio.
Typically a user can press the tab key to move the focus around the page among focusable elements, and use the space bar to activate it (press a button, choose a radio).
Do not confuse focus with a selection over the document, consisting mostly of static text nodes. See {{domxref("window.getSelection()")}} for that.
When there is no selection, the active element is the page's {{HTMLElement("body")}}.
{{Note("This attribute is part of the in-development HTML 5 specification.")}}
var curElement = document.activeElement;
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" charset="utf-8">
function init() {
function onMouseUp(e) {
console.log(e);
var outputElement = document.getElementById('output-element');
var outputText = document.getElementById('output-text');
var selectedTextArea = document.activeElement;
var selection = selectedTextArea.value.substring(
selectedTextArea.selectionStart, selectedTextArea.selectionEnd);
outputElement.innerHTML = selectedTextArea.id;
outputText.innerHTML = selection;
}
document.getElementById("ta-example-one").addEventListener("mouseup", onMouseUp, false);
document.getElementById("ta-example-two").addEventListener("mouseup", onMouseUp, false);
}
</script>
</head>
<body onload="init()">
<div>
Select some text from one of the Textareas below:
</div>
<form id="frm-example" action="#" accept-charset="utf-8">
<textarea name="ta-example-one" id="ta-example-one" rows="8" cols="40">
This is Textarea Example One:
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="8" cols="40">
This is Textarea Example Two:
Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.
</textarea>
</form>
Active Element Id: <span id="output-element"></span><br/>
Selected Text: <span id="output-text"></span>
</body>
</html>
Originally introduced as a proprietary DOM extension in Internet Explorer 4, this property also is supported in Opera and Safari (as of version 4).
{{Compat("api.Document.activeElement")}}