cordova 如何在不同的浏览器中使用DOM中的activeElement.tagName?

lmyy7pcs  于 2023-04-12  发布在  其他
关注(0)|答案(2)|浏览(156)

在尝试使用PhoneGap为Android和iOS应用程序构建UI时,我被卡住了:
我的函数getFocus()尝试使用以下方法获取焦点中元素的tagName和/或id

document.activeElement.tagName

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

  • Chromium(54.0.2840.87(64位))和android Webkit返回了我所期望的:“按钮”
  • Safari(10.0)、Firefox(49.0.2)和ios Webkit返回:“DIV”

它们看起来都是从DOM中的不同起点开始的。
我如何才能更精确地从safari/ios webkit以及chromium/ android webkit中获得至少一个按钮?
下面是完整的示例代码:

[edit]为了回应用户the 8472的有用评论,我编辑了一行代码,并在标签周围取了一个标签[/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>
63lcw9qa

63lcw9qa1#

a内部的button似乎无论如何都是无效的。如果您正在执行未指定的操作,则不应该期望一致的行为。
https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element:

4.5.1 a元素

内容模型:透明,但不能有 interactive contenta元素后代。
https://html.spec.whatwg.org/multipage/dom.html#interactive-content-2:

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

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

xtfmy6hx

xtfmy6hx2#

我得到了:
正如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

相关问题