My title might not really express what i want to achieve so i hope reader can go through my question first. I have many input on my page with different id, i want to get the ID of the particular input that get user focus and fire an event when this input loses focus. i can achieve this by explicitly state the ID and attach onblur event handler to it but this will result in writing a bulk of codes as i have too many input on the same page. now i have this below code

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

this is one of my input and i have more that 30 input so i have to make copy of it 30 time which is so crazy i need a way to make it so flexible, i tried this too but no luck

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);
        });

but this code error selector id not define but the console.log() as it define any help on how to make this work, am also open to any other idea, thaks

My title might not really express what i want to achieve so i hope reader can go through my question first. I have many input on my page with different id, i want to get the ID of the particular input that get user focus and fire an event when this input loses focus. i can achieve this by explicitly state the ID and attach onblur event handler to it but this will result in writing a bulk of codes as i have too many input on the same page. now i have this below code

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

this is one of my input and i have more that 30 input so i have to make copy of it 30 time which is so crazy i need a way to make it so flexible, i tried this too but no luck

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);
        });

but this code error selector id not define but the console.log() as it define any help on how to make this work, am also open to any other idea, thaks

• javascript
• jquery

• Does $(this).attr('id'); not work? – Script47 Commented Jul 3, 2016 at 16:40

2 Answers 2

Use :input selector to select all input element

this context in event-handler will be element on which event is invoked hence this.id will return id property of the element or ""(empty)

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

<script src="https://ajax.googleapis./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>

You can attach an event to the focused element. or just get it, with :focus selector.

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

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