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

Question

有没有一种方法可以知道哪种类型的移动在输入type =“ number”上触发了onChange事件

我解释：

我想知道更改是否来自“文本”区域或“上下箭头”区域。有可能吗？

Answer 1

onchange事件将仅在用户界面和上下键输入中的每个输入处触发。
否则，我们必须松开焦点，或者按Enter键触发此事件。

因此，我们可以检查我们是否仍然是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">

Answer 2

您可以使用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)">

Answer 3

回调中的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">