CODEWITHSUNDEEP
javascripthtmleventsonchange
Maxime Girou
Maxime Girou

Reputation: 1570

How do i know what triggered on change?

Is there a way to know what type of move triggered the onChange event on an input type="number"

I explain :

enter image description here

I want to know if the change came from the "text" area or the "down and up arrows" area. Is it possible ?

Upvotes: 0

Views: 2391

Answers (3)

Kévin Bibollet
Kévin Bibollet

Reputation: 3623

The Event object from the callback will not give you this information. But you may try this trick:

const onChange = function(e) {
  if ($(this).data('_oldval') !== this.value) {
    console.log('from arrows')
  }

  $(this).removeData('_oldval');
};

const onKeyUp = function(e) {
  if (e.which >= 37 && e.which <= 40) {
    return onChange(e);
  }

  $(this).data('_oldval', this.value);
  
  console.log('from text field');
};

$('input').on('change', onChange);
$('input').on('keyup', onKeyUp);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number">

The same without jQuery:

const onChange = function(e) {
  if (this.dataset) {
    if (this.dataset._oldval !== this.value) {
      console.log('from arrows')
    }
    
    delete this.dataset._oldval;
  }
};

const onKeyUp = function(e) {
  if (e.which >= 37 && e.which <= 40) {
    return onChange(e);
  }

  this.dataset._oldval = this.value;
  
  console.log('from text field');
};

document.querySelector('input').addEventListener('change', onChange);
document.querySelector('input').addEventListener('keyup', onKeyUp);
<input type="number">

Upvotes: 1

Ricardo Rocha
Ricardo Rocha

Reputation: 16266

You can do something like this with vanillaJavascript:

//Define a flag to save if the user used the keyboard on the input or the right arrows
let keyUpFlag = false;

//each time a change on the input is made by using the keyboard, the keyUpFlag is set to true
function onKeyUp(event) {
  keyUpFlag = true;
}


//bind this callback funtion to the on change event of the input
function onChange(event) {
  // if the this flag is set to true, means that the user changed the input by using the keyboard, so by changing the text.
  if (keyUpFlag) {
   console.log("On change from text!");
  } else {
    //If not, means that used the the right arrows to change the value
   console.log("On change from the arrows!");
  }
  //sets again the flat to false in order to reset the on key value state
  keyUpFlag = false;
}
<input type="number" onchange="onChange(event)" onkeyup="onKeyUp(event)">

Upvotes: 1

Kaiido
Kaiido

Reputation: 137084

The onchange event will fire at every input only from the UI and up-down key inputs.
Otherwise, we must loose the focus, or press enter to trigger this event.

So we can check whether we are still the activeElement and thus fired from the UI, or not, and thus came from typing.
With the one exception of the Enter key...

let enter_down = false;
inp.addEventListener('change', e => {
  if(enter_down || inp !== document.activeElement) {
    console.log('typing');
  }
  else {
    console.log('arrows');
  }
});

inp.addEventListener('keydown', e => {
  if(e.key === 'Enter') {
    enter_down = true;
  }
});
inp.addEventListener('keyup', e => {
  if(e.key === 'Enter') {
    enter_down = false;
  }
});
<input type="number" id="inp">

Upvotes: 2

Related Questions