Существует распространенная проблема, с которой сталкиваются разработчики при работе с элементом <input type="range">. Эта проблема связана с тем, что в некоторых браузерах, в частности в Firefox, событие onchange для данного элемента срабатывает только тогда, когда пользователь отпускает ползунок, и не реагирует в процессе его перетаскивания.
Допустим, есть следующий код:
<span id="valBox"></span>
<input type="range" min="5" max="10" step="1" onchange="showVal(this.value)">
function showVal(newVal){
document.getElementById("valBox").innerHTML=newVal;
}
В этом случае значение valBox обновляется только после того, как пользователь отпустит ползунок. В то же время в браузерах, таких как Chrome, событие onchange срабатывает непосредственно в процессе перетаскивания ползунка, что позволяет видеть изменения значения в реальном времени.
Однако есть способ обойти это ограничение в Firefox. Вместо события onchange можно использовать событие oninput, которое срабатывает сразу при изменении значения элемента, не дожидаясь окончания перетаскивания.
Пример исправленного кода:
<span id="valBox"></span>
<input type="range" min="5" max="10" step="1" oninput="showVal(this.value)">
function showVal(newVal){
document.getElementById("valBox").innerHTML=newVal;
}
Теперь, при перемещении ползунка в Firefox, значение valBox будет обновляться в реальном времени, так же, как это происходит в Chrome и других браузерах.
Добавить комментарий