Как получить имя тега и его идентификатор, когда на нем находится фокус мыши? - PullRequest
Новая
       0

Как получить имя тега и его идентификатор, когда на нем находится фокус мыши?

0 голосов
/ 01 октября 2018

Я хочу, чтобы функция показывала имя и идентификатор тега, когда фокус находится в теге.
Например,
фокус на входе, идентификатор которого 1th, показ input и 1th с консолью.log.
основное внимание уделяется текстовой области, идентификатор которой 2th, show textarea и 2th с console.log. 

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("");

Как показать имя и идентификатор тега, когда фокус находится вэто? 

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

Ответы [ 3 ]

0 голосов
/ 01 октября 2018

Вы можете обернуть это в более масштабируемую оболочку. 

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

0 голосов
/ 01 октября 2018

Вы можете использовать делегирование здесь.Присвойте прослушиватель событий родительскому элементу (например, body) во время использования захвата (обозначается как 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, либо отметив tagName, чтобы принимать только определенные типы элементов.

0 голосов
/ 01 октября 2018

Сначала вы можете найти идентификатор активного элемента. 

var activeElementId = document.activeElement.id;

Затем вы можете получить имя тега, как этот код. 

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

Наконец 

console.log("tag's name: " + ob + ", activeElementId: " + activeElementId);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...