我正在尝试验证 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/
关于如何验证此正确性的任何想法。谢谢。
最佳答案
您可以监听 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>
Additional Information: If you still want to use wheel event, you may add some delay to value changing operation. Even setTimeout(function(){}, 0) will solve problem. How?
<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>
关于javascript - 在 javascript 中使用鼠标滚轮事件验证输入字段的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47901635/