Откуда я знаю, что вызвало изменения? - PullRequest
Новая
       53

Откуда я знаю, что вызвало изменения?

0 голосов
/ 16 мая 2019

Есть ли способ узнать, какой тип перемещения вызвал событие onChange на входе type = "number"

Я объясняю:

enter image description here

Я хочу знать, произошло ли изменение в области «текст» или в области «стрелки вниз и вверх». Возможно ли это?

Ответы [ 3 ]

2 голосов
/ 16 мая 2019

Событие onchange будет запускаться на каждом входе только с пользовательского интерфейса и клавиш ввода-вывода вверх.
В противном случае мы должны потерять фокус или нажать 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">
1 голос
/ 16 мая 2019

Объект 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">
1 голос
/ 16 мая 2019

Вы можете сделать что-то подобное с 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)">
...