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

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

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

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

Всего 3 ответа


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

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

$(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-структуры.


Используйте * (что даст вам все 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">


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

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

Есть идеи?

10000