[英]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" 有没有办法知道什么类型的移动在输入type =“ number”上触发了onChange事件
I explain : 我解释 :
I want to know if the change came from the "text" area or the "down and up arrows" area. 我想知道更改是否来自“文本”区域或“上下箭头”区域。 Is it possible ? 可能吗 ?
The onchange
event will fire at every input only from the UI and up-down key inputs. onchange
事件将仅在用户界面和上下键输入中的每个输入处触发。
Otherwise, we must loose the focus, or press enter to trigger this event. 否则,我们必须释放焦点,或按Enter键触发此事件。
So we can check whether we are still the activeElement and thus fired from the UI, or not, and thus came from typing. 因此,我们可以检查我们是否仍然是activeElement并因此从UI中被触发,并因此而来自键入。
With the one exception of the Enter key... 除了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">
You can do something like this with vanillaJavascript: 您可以使用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)">
The Event
object from the callback will not give you this information. 回调中的Event
对象不会为您提供此信息。 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: 没有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">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.