我正在尝试验证javascript中的数字输入字段。
问题是,当我使用鼠标轮来更改值时,我无法正确验证它。
如果当前值为5,并且我用鼠标轮滚动,则当前值以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/
关于如何验证此纠正的任何想法。谢谢。
您可以收听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>