jquery - How to get Id of focused element in javascript - Stack Overflow

admin管理员组

文章数量:1425735

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

Share Improve this question Follow asked Jul 3, 2016 at 16:39 samsam 97833 gold badges2828 silver badges5858 bronze badges 1

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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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">

本文标签： jqueryHow to get Id of focused element in javascriptStack Overflow