Question

25

Is there a cross-browser solution for monitoring when the document.activeElement changes?

rated 0 times [ 29] [ 4] / answers: 1 / hits: 15940 / 12 Years ago, thu, april 5, 2012, 12:00:00

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).

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

makaylahk

Add To Favorites

Follow

Total Points: 166

Total Questions: 94

Total Answers: 117

Location: Gabon

Member since Sat, Jul 25, 2020

4 Years ago

makaylahk questions

1 Electron store data locally without localstorage

Tue, Apr 26, 22, 00:00, 2 Years ago

1 Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response when using http get req from JS to SlackAPI

Mon, Feb 28, 22, 00:00, 2 Years ago

1 How do I use the useState hook to change the color of my react icons to blue?

Wed, Jul 21, 21, 00:00, 3 Years ago

1 Property 'selectionStart' does not exist on type 'EventTarget'

Fri, Mar 19, 21, 00:00, 3 Years ago

1 How can I pass multiple values in a single prop in react?

Sat, Feb 27, 21, 00:00, 3 Years ago

View All

answered 12 Years ago shelbiec · Accepted Answer

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>