Question

我希望函数在焦点位于标签中时显示标签的名称和ID。
例如，
重点是id为1th的输入，并使用console.log显示input和1th。
重点是ID为2th的文本区域，并在console.log中显示textarea和2th。

ob = window.document.getElementsByTag("");
function getNameAndId(event){
    console.log(tag's name and id);
}
ob.addEventListener("focus",getNameAndId);

 
content:<input id="1th" type="text">
<br/>
content:<textarea id="2th" cols=6 rows=5></textarea>
<br/>
content:<input id="3th" type="text">
<br/>
content:<input id="4th" type="text">

在我的演示中，我不知道如何定义ob

ob = window.document.getElementsByTag("");

焦点对准时如何显示标签的名称和ID？

console.log(tag's name and id);

Answer 1

首先，您可以找到活动元素ID。

var activeElementId = document.activeElement.id;

然后，您将获得类似于此代码的标签名称。

var ob = document.getElementById(activeElementId).tagName;

最后

console.log("tag's name: " + ob + ", activeElementId: " + activeElementId);

Answer 2

您可以选择将其包装到更具扩展性的包装器中。

<html>
<head>
    <script>
            window.addEventListener("focusin", (event)=> {
                if (event && event.target) {
                    console.log(`ID = ${event.target.getAttribute("id")}`);
                    console.log(`NAME = ${event.target.tagName}`);
                }
            });
    </script>
</head>
<body>
    <input id="hello" style="border: 1px solid #000; padding: 20px;">
</body>

Answer 3

您可以在此处使用委托。在使用捕获（由作为第三个参数传递到body的{{1}}表示的捕获时，将事件侦听器分配给父元素（例如true）。然后使用addEventListener获取元素：

event.target

function getNameAndId(event) {
    var target = event.target;
    console.log("Tag: " + target.tagName);
    console.log("Id: " + target.id);
}
document.body.addEventListener("focus", getNameAndId, true);

注意：这将捕获content:<input id="1th" type="text"> <br/> content:<textarea id="2th" cols=6 rows=5></textarea> <br/> content:<input id="3th" type="text"> <br/> content:<input id="4th" type="text">中所有可聚焦元素上的聚焦事件。您可以通过指定body之外的另一个紧密父级或通过选中body仅接受特定的元素类型来缩小该范围。

当鼠标焦点对准标签时，如何获取标签的名称和ID？

3 个答案: