在尝试使用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>
2条答案
按热度按时间63lcw9qa1#
a内部的button似乎无论如何都是无效的。如果您正在执行未指定的操作，则不应该期望一致的行为。https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element:
4.5.1
a元素内容模型：透明，但不能有 interactive content 或
a元素后代。https://html.spec.whatwg.org/multipage/dom.html#interactive-content-2:
a（如果href属性存在），audio（如果controls属性存在），button，details，embed，iframe，img（如果usemap属性存在），[...]
xtfmy6hx2#
我得到了：
正如the8472所指出的，我应该检查一下html规范：
按钮在其焦点行为中未正确指定（可以理解）：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button告诉我，当点击按钮时不给予焦点。这解释了所描述的行为。
例如，当我将onclick=“javascript：getFocus（）”转移到标签上并单击输入字段（当然不是按钮）时，我会返回正确的和预期的焦点元素：
为了标识不同的元素，我将在后面使用
.activeElement.id