如何使用activeElement.tagName在不同浏览器的DOM内

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

本文关键字：浏览器 DOM 何使用 activeElement tagName      更新时间：2023-09-26

在尝试使用phonegap为android和ios应用程序构建UI时，我卡住了:

我的函数getFocus()尝试通过使用

获取焦点元素的tagName和/或id
document.activeElement.tagName

但是所有的浏览器似乎得到不同的结果:

  • Chromium(54.0.2840.87(64位))和android Webkit返回我所期望的:"BUTTON"
  • Safari (10.0)， Firefox(49.0.2)和ios Webkit返回:"DIV"

似乎都是从DOM中不同的起点看的。

我怎样才能更精确地从safari/ios webkit以及chromium/android webkit中获得至少BUTTON ?

下面是完整的示例代码:

[edit]我编辑了一行来回应用户the8472的有用评论，并去掉了标签[/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>

a中的button似乎无论如何都无效。如果你在做非指定的事情，你不应该期望一致的行为。

https://html.spec.whatwg.org/multipage/text-level-semantics.html the-a-element:

4.5.1 a元素

内容模型:透明，但必须没有交互内容或a元素后代。

https://html.spec.whatwg.org/multipage/dom.html interactive-content-2:

交互式内容是专门用于用户交互的内容。

a(如果href属性存在)，audio(如果controls属性存在)，button， details, embed, iframe, img(如果usemap属性存在)，[…]

我明白了:

正如the8472所指出的，我应该检查一下HTML规范:

按钮在其焦点行为中没有正确指定(可以理解):https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button告诉我，点击按钮时不要给焦点。这解释了所描述的行为。

当我转移onclick="javascript:getFocus()"的标签，例如，并单击输入字段(当然不是按钮)，我得到正确的和预期的焦点元素返回:

<!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>

来标识不同的元素，我稍后将使用.activeElement.id

相关文章：