CODEWITHSUNDEEP
javascriptjquery
M3RS
M3RS

Reputation: 7520

How to tell what triggered jQuery focus()?

I have an input field and a button. It is necessary that when the button is clicked the input field gets focus.

I need the behaviour to be slightly different depending on whether the input field was focused manually by the user or if it was focused due the button being clicked.

It seems this would be relatively simple, but I couldn't come up with a solution so far. Any ideas very welcome.

$("button").click(function() {
    target_input = $("input");
    target_input.focus();
});

$("input").focus(function() {
    // if focus done manually by user
    //    do something
    // if focus done via button
    //    do something else
});

Upvotes: 1

Views: 160

Answers (3)

user6748331
user6748331

Reputation:

This works without global variables and it is cross-browser working solution:

$('button').click(function () {
  $(this).prev('input').focus()
})

$('input').click(function (e) { // yes, listen to click instead
   // original event exists only if input was clicked directly
  if (e.originalEvent) {
    console.log('manually triggered')
  }
})
<div style="background-color: yellow;">
  <input type="text">
  <button>Focus input</button>
  <br>
  <input type="text">
  <button>Focus input</button>
</div>

<script src="https://unpkg.com/jquery"></script>

Upvotes: 0

MennyMez
MennyMez

Reputation: 2466

Here is a solution that uses no extra variables, instead it checks the event.

$("button").click(function() {
    target_input = $("input");
    target_input.focus();
});

$("input").focus(function(e) {
    // if focus done manually by user
    //    do something
    // if focus done via button
    //    do something else

   if(e.originalEvent.relatedTarget){
      // only from button events
   }

   // here is from all events
});

this e.originalEvent.relatedTarget will return null if we didn't use the button to originate the focus. remember to add e to the function.

Upvotes: 3

mrks
mrks

Reputation: 8333

You should be able to use Event.isTrusted for this:

The isTrusted read-only property of the Event interface is a boolean that is true when the event was generated by a user action, and false when the event was created or modified by a script or dispatched via dispatchEvent.

$("input").focus(function(e) {
    if(e.isTrusted) {...} else {...}
});

As noted in the comments, neither IE nor Safari like this.

Upvotes: 0

Related Questions