我有一个范围滑块，在达到36之前的步骤是1，超过36之后的步骤是3。我用键盘上的左右箭头键控功能控制滑块。它工作得很好，除了当你点击或拖动滑块，然后尝试使用键控。如果你这样做，你会注意到步骤被应用了两次。
通过一些工作，我发现步骤本身并不加倍，但由于某种原因，步骤被从rangeSlider.value中减去两次而不是一次。我完全不知道如何解决这个问题。你会注意到，在点击滑块上的任何地方，然后使用keydown后，“here2”控制台日志将增加两倍的步骤，我不知道为什么。
在单击滑块并接收到keydown事件后，如何使rangeSlider.的值按正确的步长增加？
var rangeSlider = document.getElementById('range-slider');
console.log(rangeSlider.value);
document.addEventListener('keydown', function(e) {
// If the value of the slider is greater than 36, set the step size to 3
if (rangeSlider.value >= 36) {
var step = 3;
} else {
var step = 1;
}
rangeSlider.setAttribute("step", step)
if (e.keyCode == 39) { //right
console.log(rangeSlider.value, 'here')
rangeSlider.value = parseInt(rangeSlider.value) + parseInt(step);
console.log(parseInt(rangeSlider.value), 'here2')
} else if (e.keyCode == 37) { //left
console.log(rangeSlider.value, 'here')
rangeSlider.value = parseInt(rangeSlider.value) - parseInt(step);
console.log(parseInt(rangeSlider.value), 'here2')
}})<input type='range' min='0' max='84' value='0' id='range-slider' class='slider'/>
1条答案
按热度按时间pw9qyyiw1#
当元素具有焦点时，按箭头键将触发元素的内置事件处理程序：它不需要额外的代码就可以增加值。你的额外代码可以进一步增加值。你只需要改变步长。如果你想在它没有焦点的时候增加值，可以使用keydown事件来设置焦点。