在javascript中使用鼠标滚轮事件验证输入字段的问题

Question

我正在尝试在Javascript中验证数字输入字段.

问题是,当我使用鼠标滚轮更改值时,我无法正确验证它.

如果当前值为5,并且我使用鼠标滚轮向上滚动,则当前值显示为5,而不显示为6.似乎在事件开始时触发了鼠标事件.因此它仍然具有旧的价值.

<label>Choose an ice cream flavor:
    <input type="number">
    <p></p>
</label>
<script>
var inputc = document.querySelector('input');
var pc = document.querySelector('p');
inputc.addEventListener('wheel', function (e){
  pc.innerText = 'The value is ' + inputc.value;
});
</script>

链接到jsfiddle:https://jsfiddle.net/3o8g7cdy/1/

关于如何验证此相关性的任何想法.谢谢.

Answer 1

你可以听取input事件而不是wheel.

var inputc = document.querySelector('input');
var pc = document.querySelector('p');
inputc.addEventListener('input', function (e){
  pc.innerText = 'The value is ' + inputc.value;
});

<label>Choose an ice cream flavor:
    <input type="number">
    <p></p>
</label>

附加信息:如果您仍想使用滚轮事件,则可能会为更改值操作添加一些延迟.甚至setTimeout(function(){},0)也会解决问题. 怎么样？

<label>Choose an ice cream flavor:
    <input type="number">
    <p></p>
</label>
<script>
var inputc = document.querySelector('input');
var pc = document.querySelector('p');
inputc.addEventListener('wheel', function (e){
 setTimeout(function(){ pc.innerText = 'The value is ' + inputc.value;},0);
});
</script>