Menu
I'm really looking for something that works with all current popular browsers (IE9, Chrome, Firefox, Safari) and all the way back to IE8.
Although, I've been looking for a way to set focus on a Flash move object after it has lost focus, I've found that all historical ways of doing this fail. I assume it is yet another security issue.
So, I'm now looking for how to monitor change events of some sort for the document.activeElement (though "change" doesn't really occur).
While @James's answer above is correct. I've added more details to make it a completely working solution along with the use of focus event too.
<html>
<body>
<input type="text" id="Text1" name ="Text1" value=""/>
<input type="text" id="Text2" name ="Text2" value=""/>
<SELECT><OPTION>ASDASD</OPTION><OPTION>A232</OPTION></SELECT>
<INPUT TYPE="CHECKBOX" id="Check1"/>
<INPUT type="TEXT" id="text3"/>
<input type="radio"/>
<div id="console"> </div>
<textarea id="textarea1"> </textarea>
<script>
var lastActiveElement = document.activeElement;
function detectBlur() {
// Do logic related to blur using document.activeElement;
// You can do change detection too using lastActiveElement as a history
}
function isSameActiveElement() {
var currentActiveElement = document.activeElement;
if(lastActiveElement != currentActiveElement) {
lastActiveElement = currentActiveElement;
return false;
}
return true;
}
function detectFocus() {
// Add logic to detect focus and to see if it has changed or not from the lastActiveElement.
}
function attachEvents() {
window.addEventListener ? window.addEventListener('focus', detectFocus, true) : window.attachEvent('onfocusout', detectFocus);
window.addEventListener ? window.addEventListener('blur', detectBlur, true) : window.attachEvent('onblur', detectBlur);
}
attachEvents();
</script>
</body>
</html>
61
It seems that you can use a combination of capturing focus/blur and focusin/focusout (IE) events. Something like this perhaps:
window.addEventListener ?
window.addEventListener('blur', blurHappened, true)
: window.attachEvent('onfocusout', blurHappened);
function blurHappened() {
console.log('document.activeElement changed');
}
onfocusout will catch bubbled "blurs" while regular blur on addEventListener will capture "blurs".
You may need to add additional checks in blurHappened. I'm not sure as I haven't tested.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
