Our volunteers haven't translated this article into বাংলা (বাংলাদেশ) yet. Join us and help get the job done!
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 <input> or <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 <select> element (menu) or an <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 window.getSelection() for that.
When there is no selection, the active element is the page's <body> or null.
Syntax
var curElement = document.activeElement;
Example
<!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>
Notes
Originally introduced as a proprietary DOM extension in Internet Explorer 4, this property also is supported in Opera and Safari (as of version 4).
Specification
| Specification | Status | Comment |
|---|---|---|
| WHATWG HTML Living Standard The definition of 'activeElement' in that specification. |
Living Standard |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 2 | 3.0 | 4 [1] | 9.6 | 4.0 |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | ? | ? | ? | ? |
[1]: IE9 suffers from a bug where trying to access the activeElement of an <iframe>'s window.parent Document (i.e. parent.document.activeElement) will throw an error.