我怎么知道是什么触发了变化？

Question

有没有办法知道什么类型的移动触发了输入类型上的 onChange 事件="number"

我解释一下:

我想知道更改是来自 "text" 区域还是 "down and up arrows" 区域。可能吗？

Answer 1

你可以用 vanilla Javascript 做这样的事情：

//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)">

Answer 2

回调中的 Event 对象不会为您提供此信息。但是你可以试试这个技巧：

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">

同样没有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">

Answer 3

onchange 事件仅在来自 UI 和 up-down 键输入的每个输入时触发。
否则，我们必须松开焦点，或者回车才能触发这个事件。

所以我们可以检查我们是否仍然是 activeElement 并因此从 UI 中触发，或者不是，因此来自输入。
除了 Enter 键之外...

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">

我怎么知道是什么触发了变化？

How do i know what triggered on change?

html

javascript

events

onchange