Determine the field that called a function

Question

Not sure exactly what to ask here, so please be patient.

I have an input field, and i need to grab the onfocusin and onfocusout events and perform some logic.

I would like to use a single common function to handle the onfocusin, and a common function to handle the onfocusout function.

So - how would i determine the ID of the input field within the functions?

<input type="text" class="form-control" id="location_notes"  onfocusin="fieldFocusIn()" onfocusout="fieldFocusOut()" placeholder="Location Notes">
<input type="text" class="form-control" id="additional_notes"  onfocusin="fieldFocusIn()" onfocusout="fieldFocusOut()" placeholder="Additional Notes">

function fieldFocusIn(){
// do some stuff with the calling field
}

function fieldFocusOut(){
// do some different stuff with the calling field
}

`onfocusin="fieldFocusIn(this)"` and then `function fieldFocusIn(element)`. — takendarkk, Nov 28 '18 at 21:16
Possible duplicate of [Getting the ID of the element that fired an event](https://stackoverflow.com/questions/48239/getting-the-id-of-the-element-that-fired-an-event) — Herohtar, Nov 28 '18 at 21:16
try passing this inside the function call. Like onFocusIn="fieldFocusIn(this)" and onFocusOut="fieldFocusOut(this)" — Sonal Borkar, Nov 28 '18 at 21:17

score 2 · Accepted Answer · answered Nov 28 '18 at 21:17

Use event.currentTarget.id - in order to get the event object, because you're using inline events, you need to pass the word event into your function calls. a.e. onfocusin="fieldFocusIn(event)"

In your event handlers you receive the event parameter, and look at the currentTarget object within that event, and at the id property of that object.

<input type="text" class="form-control" id="location_notes"  onfocusin="fieldFocusIn(event)" onfocusout="fieldFocusOut(event)" placeholder="Location Notes">
<input type="text" class="form-control" id="additional_notes"  onfocusin="fieldFocusIn(event)" onfocusout="fieldFocusOut(event)" placeholder="Additional Notes">

<script>

function fieldFocusIn(e){
console.log(e.currentTarget.id);
// do some stuff with the calling field
}

function fieldFocusOut(e){
console.log(e.currentTarget.id);
// do some different stuff with the calling field
}
</script>

score 1 · Answer 2 · answered Nov 28 '18 at 21:17

1

You could simply pass your desired id as a function argument:

<input 
    id="location_notes"  
    onfocusin="fieldFocusIn('location_notes')" 
    onfocusout="fieldFocusOut('location_notes')"
>

function fieldFocusIn(id){
    console.log(id) // location_notes
}

function fieldFocusOut(id){
   console.log(id) // location_notes
}

answered Nov 28 '18 at 21:17

kind user

32,209
6
49
63

I don't think you need to repeat the id. You could simply do `onfocusin="fieldFocusIn(this.id)"` for example – customcommander Nov 28 '18 at 21:20

score 0 · Answer 3 · answered Nov 28 '18 at 21:18

0

Just take the id from the target in the event:

function fieldFocusIn(event){
    console.log(event.target.attributes.id.value);
}

function fieldFocusOut(event){
   console.log(event.target.attributes.id.value);
}

answered Nov 28 '18 at 21:18

Matthew Herbst

21,357
19
68
107

right, but inline functions don't naturally pass the event object. – zfrisch Nov 28 '18 at 21:22
Yeah - as your answer notes, he'll need to modify his HTML a little - why I upvoted it :) – Matthew Herbst Nov 28 '18 at 21:25

score 0 · Answer 4 · answered Nov 28 '18 at 21:35

You could also consider using event delegation if you find yourself attaching the same event handlers over and over again:

function focusIn(callback) {
  document.querySelector('#fields').addEventListener('focusin',
    (event) => callback(event.target.id));
}

function focusOut(callback) {
  document.querySelector('#fields').addEventListener('focusout', 
    (event) => callback(event.target.id));
}

focusIn((id) => console.log(`focus in: ${id}`));
focusOut((id) => console.log(`focus out: ${id}`));

<div id="fields">
  <input id="foo" placeholder="foo" />
  <input id="bar" placeholder="bar" />
  <input id="baz" placeholder="baz" />
  <input id="bat" placeholder="bat" />
</div>

Determine the field that called a function

4 Answers4