Событие onChange для диапазона HTML5

Question

В настоящее время событие onChange на входах моего диапазона срабатывает на каждом шаге.

Есть ли способ остановить запуск этого события до тех пор, пока пользователь не отпустит ползунок?

Iиспользую диапазон для создания поискового запроса.Я хочу иметь возможность запускать поиск каждый раз, когда форма меняется, но выдача запроса на поиск на каждом шаге движения ползунка - это слишком много.

---

Вот код в его нынешнем виде:

HTML:

<div id="page">
    <p>Currently viewing page <span>1</span>.</p>
    <input class="slider" type="range" min="1" max="100" step="1" value="1" name="page" />
</div>

JavaScript:

$(".slider").change(function() {
    $("#query").text($("form").serialize());
});

Это помогает?

Answer 1

Используется для окончательного выбранного значения:

 $(".slider").on("change", function(){console.log(this.value)});

Используется для получения инкрементного значения как скользящего:

$(".slider").on("input", function(){console.log(this.value)});

Answer 2

Немного поздно, но у меня была та же проблема на днях.Вот мое решение, использующее связывание / триггер jQuery:

(function(el, timeout) {
    var timer, trig=function() { el.trigger("changed"); };
    el.bind("change", function() {
        if(timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(trig, timeout);
    });
})($(".slider"), 500);

Теперь просто свяжите вашу функцию с событием «изменено».

Answer 3

Бах!

Использование события onmouseup Вместо onChange

Answer 4

Одной из проблем является то, что AFAIK HTML5 не определяет, когда должно происходить событие onchange, поэтому оно, скорее всего, отличается от браузера к браузеру.И вам также нужно учитывать, что браузер на самом деле не должен отображать input type=range как слайдер.

Ваш единственный выбор - вам нужно встроить механизм, чтобы убедиться, что ваш поиск нене запускаются слишком часто, например, проверьте, выполняется ли в данный момент поиск, и прервите его, если это так, или убедитесь, что поиск запускается максимум каждые x секунд.

Быстрыйпример для последнего (просто быстрый взлом, непроверенный).

var doSearch = false;

function runSearch() {
   // execute your search here 
}

setInterval(function() {
  if (doSearch) {
     doSearch = false;
     runSearch();
  }
}, 2000); // 2000ms between each search.

yourRangeInputElement.onchange = function() { doSearch = true; }

Answer 5

Чистый JS здесь:

myInput.oninput = function(){
    console.log(this.value);
}

или

myInput.onchange = function(){
    console.log(this.value);
}

Answer 6

gravediggin, но если вам нужно, проверьте js throttle или debounce functions

Использование:

//resize events gets processed 500ms after the last Event
addEventListener("resize", _debounce(function(){ foo;}, 500));

//resize events get processed every 500ms
addEventListener("resize", _throttle(function(){ foo;}, 500));

Код:

/*waits 'delay' time after the last event to fire */
_debounce = function(fn, delay) {
    var timer = null;
    return function() {
        var context = this,
            args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function() {
            fn.apply(context, args);
        }, delay);
    };
};


/* triggers every 'treshhold' ms, */
_throttle = function(fn, threshhold, scope) {
    threshhold = threshhold || 250;
    var last,
        deferTimer;
    return function() {
        var context = scope || this;

        var now = +new Date(),
            args = arguments;
        if (last && now < last + threshhold) {
            // hold on to it
            clearTimeout(deferTimer);
            deferTimer = setTimeout(function() {
                last = now;
                fn.apply(context, args);
            }, threshhold);
        } else {
            last = now;
            fn.apply(context, args);
        }
    };
};

Answer 7

Я использую несколько ползунков HTML5 по умолчанию на одной странице со следующей настройкой:

• Выходной тег на странице изменяет значение при перемещении ползунка с помощью события oninput
• Событие change запускается один раз при выпуске

Протестировано с последним Chrome и хорошо компилируется на Raspberry с Node и Socket.io.

<output id="APIDConKpVal"></output>&nbsp; <input type="range"
             class="PIDControlSlider"
             min="0"
             max="1500"
             step="1"
             id="APIDConKp"
             oninput="APIDConKpVal.value=value"/>

<output id="APIDConKiVal"></output>&nbsp; <input type="range"
             class="PIDControlSlider"
             min="0"
             max="2000"
             step="1"
             id="APIDConKi"
             oninput="APIDConKiVal.value=value"/>

Простой код Javascript создает слушателей. Возможно, вам придется попробовать другие события вместо «изменения» в последней строке, чтобы увидеть, что вам подходит.

window.onload=function()
{
 var classname = document.getElementsByClassName("PIDControlSlider");

    var myFunction = function() {
        var attribute = this.getAttribute("id");
//Your code goes here
        socket.emit('SCMD', this.getAttribute("id")+' '+ this.value);
    };

    for(var i=0;i<classname.length;i++){
        classname[i].addEventListener('change', myFunction, false);
    }
}

Answer 8

Вот что я использую для захвата 'события изменения' для ползунка диапазона html5:

HTML:

<form oninput="output1.value=slider1.value">
    <input type="range" name="slider1" value="50"/>
    <output name="output1" for="slider1">50</output>
</form>

JavaScript:

var $slider = $('input[name="slider1"]');

$slider.bind('change', function(e) {
    e.preventDefault();
    console.log($(this).val());
});

Вы также можете привязать событие «click» к ползунку диапазона, если вы хотите вернуть его значение, когда он был нажат (или даже перетащен).Думайте об этом как о событии «мышиный».(Я попробовал это, но ползунок не остановился после того, как я нажал на ползунок.)

JavaScript:

$slider.bind('click', function(e) {
    e.preventDefault();
    console.log($this).val());
}

На примечании стороны этовозвращает строку, поэтому убедитесь, что вы используете 'parseInt ($ (this) .value ())', когда это необходимо.

Надеюсь, это поможет.

Answer 9

Давайте добавим в коллекцию простую альтернативу ES6:

let timer;

const debounceChange = (value, callback) => {
    clearTimeout(timer);
    timer = setTimeout(() => callback(value), 500);
};

При использовании в JSX это будет выглядеть так:

<input type="range" onChange={e => debounceChange(e.target.value, props.onChange)}/>

Answer 10

onchange работает просто отлично, но мне нужно было обновить значение при его скольжении.

var interval;
$("#rangeinput").mousedown(function(event){
    interval = setInterval(function(){
        $("#output").html($("#rangeinput").val());
        console.log("running");
    },150);
});

$("#rangeinput").mouseup(function(event){
    clearInterval(interval);
});

http://jsbin.com/vibuc/1/