Узнайте, какой элемент в данный момент сфокусирован, используя focus ()

Question

Я прочитал много постов здесь, используя .focus (), но я не могу решить мою проблему. Мне нужно запускать alert или console.log каждый раз, когда элемент фокусируется, мне нужно продолжать нажимать «tab» и получать фокусируемый элемент.

моя проблема в самом селекторе, я знаю, как сделать .focus() с известным элементом, таким как

$('.foo').focus(function(){
  alert('foo is focused');
});

Answer 1

Для этого вы можете использовать делегированный обработчик событий. Он будет прослушивать событие focus на всех дочерних элементах.

Обратите внимание, что в этом примере прослушивается событие в любом элементе управления формы, но этот селектор может быть изменен так, чтобы соответствовать тому, что требуется в вашем конкретном c сценарии использования.

$(document).on('focus', ':input', function() {
  console.log(this.id);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="foo" />
<input type="text" id="bar" />
<input type="text" id="fizz" />
<input type="text" id="buzz" />

Вы также можете использовать для этого селектор с подстановочными знаками (*), но при этом могут возникнуть проблемы с производительностью в зависимости от сложности вашего HTML структура есть.

Answer 2

Используйте * (что даст вам все DOM-узлы) или, возможно, краткий список элементов.

$("*").on("focus", function(){
  console.log(this.id);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="id1">
<input type="text" id="id2">

Answer 3

для других пользователей, которым может потребоваться только выбрать указанные c входы в пределах определенного класса, которые вы можете использовать

<!-- set the same class for each input -->
    <label>first text box</label>
    <input type="text" class="myinput">
    <label>second text box</label>
    <input type="text" class ="myinput">

    <script>
    //on document ready add eventListner to all the inputs within your class
    $(document).ready(()=>{
        document.querySelectorAll('.myinput').forEach(item => {
        item.addEventListener('focus', event => {
        //handle focus
        console.log("got focus");
        //or
        alert("got foucs")
        })
        })

        })

    </script>