Как получить идентификатор сфокусированного элемента в javascript

Question

Мое название может не реально выразить то, что я хочу достичь, поэтому я надеюсь, что читатель может сначала решить мой вопрос. У меня есть много входных данных на моей странице с разными идентификаторами, я хочу получить идентификатор конкретного входа, который получает фокус пользователя и запускает событие, когда этот вход теряет фокус. я могу достичь этого, явно указывая ID и присоединяя к нему обработчик событий onblur, но это приведет к написанию большого количества кодов, поскольку у меня слишком много ввода на той же странице. Теперь у меня есть это ниже код

var \$Title = $('#draft-product_title') 
     \$Title.on('blur',function(event){ 
      eventId = event.target.id; 
      draftEventHandler(\$Title,eventId); 
     }); 

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

var \$selectorId; 
$('body').on('click',function(event) { 
      \$focusElementId = document.activeElement.id; 
      \$selectorId = ('#'+\$focusElementId) 
      console.log(\$selectorId); 
     }); 

     \$selectorId.on('blur',function(event){ 
      eventId = event.target.id; 
      draftEventHandler(\$selectorId,eventId); 
     }); 

, но этот код ошибки селектор идентификатор не определен, но console.log(), как она определить любую помощь в том, чтобы сделать эту работу, я также открыт для любой другой идеи, Thaks

Answer 1

Используйте :input селектор, чтобы выбрать все input элемент

this контекст event-handler будет element, на котором event является invoked поэтому this.id вернет id собственность из element или "" (пусто)

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<form action="action_page.php"> 
 
    First name: 
 
    <br> 
 
    <input type="text" id="name" value="Mickey"> 
 
    <br>Last name: 
 
    <br> 
 
    <input type="text" name="lastname" id="lastname" value="Mouse"> 
 
    <br> 
 
    <br> 
 
    <select> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
    </select> 
 
    <input type="submit" value="Submit"> 
 
</form>

Answer 2

Вы можете прикрепить событие к сфокусированному элементу. или просто получить его, с селектором :focus.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input id="id1" type="test1" value="id1"> 
 
<input id="id2" type="test2" value="id2">