web-dev-qa-db-ja.com

HTML5範囲のonChangeイベント

現在、レンジ入力のonChangeイベントは各ステップで発生しています。

ユーザーがスライダーを離すまで、このイベントの発生を停止する方法はありますか？

範囲を使用して検索クエリを作成しています。フォームが変更されるたびに検索を実行できるようにしたいのですが、スライダーの動きの各ステップで検索リクエストを発行するのは多すぎます。

コードは次のとおりです。

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());
});

それは役立ちますか？

htmlhtml5formsrangeonchange
67
WilliamMayor

最終選択値に使用：

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

増分値をスライドとして取得するために使用します。

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

少し遅れましたが、先日同じ問題がありました。 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);

ここで、代わりに関数を「changed」イベントにバインドするだけです。

14
Arwyn

ああ！

onmouseupではなくonChangeイベントを使用します

9
Toastar

問題の1つは、onchangeイベントが発生するタイミングをHTML5が定義していないため、ブラウザーごとに異なる可能性が高いことです。また、ブラウザーが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; }
6
RoToRa

ここに純粋なJS：

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

または

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

gravedigginが必要な場合は、js throttleまたはdebounce関数をチェックしてください

使用法：

//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);
        }
    };
};
2
mons droid

以下は、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());
});

クリック（またはドラッグ）されたときに値を返す場合は、「クリック」イベントを範囲スライダーにバインドすることもできます。 「マウスアップ」イベントのように考えてください。 （試してみましたが、スライダーをクリックしてもスライダーが停止しませんでした。）

JavaScript：

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

補足として、これは文字列を返すので、適切な場合は必ず「parseInt（$（this）.value（））」を使用してください。

お役に立てれば。

1
Scott

次の設定で、同じページで複数のHTML5デフォルトスライダーを使用します。

  • oninputイベントを使用してスライダーを移動すると、ページの出力タグの値が変更されます
  • changeイベントはリリース時に1回トリガーされます

最新のChromeでテストし、NodeおよびSocket.ioを使用してRaspberryで適切にコンパイルします。

<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);
    }
}
1
Paolo

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/

0
alejandro

別の提案：

$(".slider").change(function(){    
  if (this.sliderTimeour) clearTimeout(this.sliderTimeour);
  this.sliderTimeour = setTimeout(function(){
    //your code here
  },delayTimeHere);
});
0
Sagiv Ofek

コレクションに簡単な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)}/>
0
Marco Kerwitz

blurイベントの使用を試みることができます。もちろん、それには制限もありますが、単なる別の提案です:)

blur、onkeyup、およびonmouseupイベントを組み合わせて、さまざまな状況をキャッチしようとすることもできます。blurユーザーがキーボードの矢印とヒットで選択したとき<Tab>、onkeyupユーザーがキーボードで選択を行い、スライダーにフォーカスを合わせた場合、およびonmouseupはマウスを使用した場合。 onkeyupとonmouseupのみを組み合わせることも可能です。

それでも、値が変更されたかどうかを簡単に確認し、変更が発生した後にのみ必要なコードを実行する必要があります。

0
Michal Trojanowski