Вебинары Разобраться в IT Реферальная программа
Программирование Аналитика Дизайн Маркетинг
ПРИХОДИТЕ УЧИТЬСЯ НОВОЙ ПРОФЕССИИ ЛЕТОМ СО СКИДКОЙ ДО 70% Забронировать скидку
10 Июл 2023
2 мин
92

Обработка события onchange в Firefox при использовании input type=range

Существует распространенная проблема, с которой сталкиваются разработчики при работе с элементом <input type=»range»>. Эта проблема связана с тем,

Существует распространенная проблема, с которой сталкиваются разработчики при работе с элементом <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 и других браузерах.

Добавить комментарий

Подарок
Забрать подарок