Evénement onChange pour la gamme HTML5

Question

Actuellement, l'événement onChange sur ma plage d'entrées est de tir à chaque étape.

Est-il un moyen d'arrêter cette déclenchement de l'événement jusqu'à ce que l'utilisateur a lâché le curseur?

Je suis à l'aide de la gamme pour créer une requête de recherche. Je veux être en mesure de lancer la recherche, chaque fois que le formulaire est changé, mais l'émission d'une requête de recherche à chaque étape du curseur du mouvement est de trop.

Merci pour votre aide

---

Voici le code tel qu'il est:

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

Est-ce que c'est?

Answer 1

Utiliser pour la valeur finale sélectionnée:

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

Utilisez pour obtenir une valeur incrémentielle en glissant:

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

Answer 2

Un peu tard, mais j'ai eu le même problème l'autre jour. Voici ma solution utilisant jQuery bind / trigger:

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

Maintenant, associez simplement votre fonction à l'événement 'modifié'.

Answer 3

Bah!

Utilisez les événements onmouseup plutôt que onChange

Answer 4

Un problème est que, autant que je sache, le HTML5 n'est pas de définir le moment de l' onchange événement est censé le feu, il est probablement différent d'un navigateur à l'autre. Et vous avez également à considérer, qu'un navigateur n'est pas réellement nécessaire de rendre un input type=range comme un curseur.

Votre seul choix est que vous avez à construire un mécanisme pour s'assurer que votre recherche n'est pas déclenchée trop souvent, par exemple, de vérifier si une recherche est actuellement en cours d'exécution et l'annuler si elle est, ou assurez-vous que les recherches sont déclenchés à un maximum de toutes les x secondes.

Exemple rapide de ce dernier (juste un petit hack, non testé).

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

Voici ce que j'utilise pour la capture de la 'événement de changement" pour le html5 curseur de plage:

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

Vous pouvez également lier le "clic" de l'événement pour le curseur de plage si vous voulez retourner à sa valeur quand il a été cliqué (ou même traîné). Pensez-y comme un "mouseup". (J'ai essayé, mais le curseur ne s'arrête pas après je clique sur le curseur.)

JavaScript:

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

Sur une note de côté, il renvoie une chaîne de caractères et assurez-vous que vous utilisez la " parseInt($(this).valeur())' le cas échéant.

Espérons que cette aide.