How to use activeElement.tagName inside of DOM in different browsers?

while trying to build an UI for an android and ios app with phonegap i got stuck:

my function getFocus() tries to get the tagName and/or id of the element in focus by using

document.activeElement.tagName

but all browsers seems to get different results:

Chromium (54.0.2840.87 (64-bit)) and androids Webkit return what I would expect: "BUTTON"
Safari (10.0), Firefox (49.0.2) and the ios Webkit return: "DIV"

they all seem to look from a different starting point in the DOM.

How can i be more precise in order to get at least BUTTON from safari/ios webkit as well as chromium/ android webkit?

here is the complete example code:

[edit] I edited one line in response to the helpful comment by user the8472 and took out an tag that was around the tag [/edit]

<!DOCTYPE html>
<html>

<head>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>

    <div data-role="page" id="add">
      <div data-role="header">
        <h1>GetFocus</h1>
      </div>

      <div data-role="main" class="ui-content">
        <p></p>
        <p>
            textfield1:
            <input type="text" id="title" placeholder="textfield1" />
            textfield2:
            <input type="text" id="message" placeholder="textfield2" />

            <button id="mybutton" onclick="javascript:getFocus()">get focus</button>
        </p>
      </div>
    </div>



    <script type="text/javascript" src="cordova.js"></script>
    <script src="phonegap.js"></script>
    <script type="text/javascript">

        function getFocus()
        {
         alert(document.activeElement.tagName);
        };

    </script>
</body>

</html>

Solution

i got it:

as the8472 pointed out, i should check the html specs:

button is (understandably) not properly specified in its focus behaviour: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button tells me that do not give focus to a button when clicked. that explains the described behaviour.

when i transfer the onclick="javascript:getFocus()" to the tag for example and click on input fields (not the button of course) i get the correct and to be expected elements in focus returned:

<!DOCTYPE html>
<html>

<head>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body id="mybody" onclick="javascript:getFocus()">

    <div data-role="page" id="add">
      <div data-role="header" id="myheaderDiv">
        <h1>GetFocus</h1>
      </div>

      <div data-role="main" class="ui-content" id="mydiv">

        <p id="myp">
            textfield1:
            <input type="text" id="title" placeholder="textfield1" />
            textfield2:
            <input type="text" id="message" placeholder="textfield2" />

            <button id="mybutton">get focus</button>
        </p>
      </div>
    </div>



    <script type="text/javascript" src="cordova.js"></script>
    <script src="phonegap.js"></script>
    <script type="text/javascript">

        function getFocus()
        {
         alert(document.activeElement.tagName);
        };

    </script>
</body>

</html>

to identify the different elements i will later use .activeElement.id