événement onchange sur le type d'entrée = la plage ne se déclenche pas dans firefox lors du glissement

Lorsque je jouais avec <input type="range">, Firefox déclenche un événement onchange uniquement si nous déposons le curseur dans une nouvelle position où Chrome et d'autres déclenchent des événements onchange pendant que le curseur est déplacé.

Comment puis-je y arriver en faisant glisser dans Firefox?

function showVal(newVal){
    document.getElementById("valBox").innerHTML=newVal;
}

<span id="valBox"></span>
<input type="range" min="5" max="10" step="1" onchange="showVal(this.value)">

Apparemment, Chrome et Safari ont tort: onchangene doivent être déclenchés que lorsque l'utilisateur relâche la souris. Pour obtenir des mises à jour continues, vous devez utiliser l' oninputévénement, qui capturera les mises à jour en direct dans Firefox, Safari et Chrome, à la fois à partir de la souris et du clavier.

Cependant, oninputn'est pas pris en charge dans IE10, donc votre meilleur pari est de combiner les deux gestionnaires d'événements, comme ceci:

<span id="valBox"></span>
<input type="range" min="5" max="10" step="1" 
   oninput="showVal(this.value)" onchange="showVal(this.value)">

Consultez ce fil Bugzilla pour plus d'informations.

RÉSUMÉ:

Je fournis ici une capacité de bureau et mobile multi-navigateur sans jQuery pour répondre de manière cohérente aux interactions plage / curseur, ce qui n'est pas possible dans les navigateurs actuels. Il oblige essentiellement tous les navigateurs à émuler l' on("change"...événement IE11 pour leur on("change"...ou leurs on("input"...événements. La nouvelle fonction est ...

function onRangeChange(r,f) {
  var n,c,m;
  r.addEventListener("input",function(e){n=1;c=e.target.value;if(c!=m)f(e);m=c;});
  r.addEventListener("change",function(e){if(!n)f(e);});
}

... où rest votre élément d'entrée de plage et fvotre auditeur. L'auditeur sera appelé après toute interaction qui modifie la valeur de la plage / du curseur, mais pas après les interactions qui ne modifient pas cette valeur, y compris les interactions initiales de la souris ou du toucher à la position actuelle du curseur ou lors du déplacement de l'une ou l'autre extrémité du curseur.

Problème:

Au début de juin 2016, les différents navigateurs diffèrent en termes de réponse à l'utilisation de la plage / du curseur. Cinq scénarios sont pertinents:

1. initial de la souris (ou démarrage tactile) à la position actuelle du curseur
2. déplacement initial de la souris (ou démarrage tactile) à une nouvelle position du curseur
3. tout mouvement ultérieur de la souris (ou du toucher) après 1 ou 2 le long du curseur
4. tout mouvement ultérieur de la souris (ou du toucher) après 1 ou 2 après chaque extrémité du curseur
5. souris finale (ou tactile)

Le tableau suivant montre comment au moins trois navigateurs de bureau différents diffèrent dans leur comportement en ce qui concerne les scénarios ci-dessus auxquels ils répondent:

Solution:

La onRangeChangefonction fournit une réponse inter-navigateur cohérente et prévisible aux interactions plage / curseur. Il oblige tous les navigateurs à se comporter conformément au tableau suivant:

Dans IE11, le code permet essentiellement à tout de fonctionner selon le statu quo, c'est-à-dire qu'il permet à l' "change"événement de fonctionner de manière standard et que l' "input"événement n'a pas d'importance car il ne se déclenche jamais de toute façon. Dans d'autres navigateurs, l' "change"événement est effectivement réduit au silence (pour empêcher le déclenchement d'événements supplémentaires et parfois non apparents). De plus, l' "input"événement ne déclenche son écouteur que lorsque la valeur de la plage / du curseur change. Pour certains navigateurs (par exemple Firefox), cela se produit car l'auditeur est effectivement désactivé dans les scénarios 1, 4 et 5 de la liste ci-dessus.

(Si vous avez vraiment besoin qu'un écouteur soit activé dans les scénarios 1, 4 et / ou 5, vous pouvez essayer d'incorporer les événements "mousedown"/ "touchstart", "mousemove"/ "touchmove"et / ou "mouseup"/ "touchend". Une telle solution dépasse le cadre de cette réponse.)

Fonctionnalité dans les navigateurs mobiles:

J'ai testé ce code dans les navigateurs de bureau mais pas dans les navigateurs mobiles. Cependant, dans une autre réponse sur cette page, MBourne a montré que ma solution ici "... semble fonctionner dans tous les navigateurs que j'ai pu trouver (bureau Win: IE, Chrome, Opera, FF; Android Chrome, Opera et FF, iOS Safari) " . (Merci MBourne.)

Usage:

Pour utiliser cette solution, incluez la onRangeChangefonction du résumé ci-dessus (simplifiée / minifiée) ou l'extrait de code de démonstration ci-dessous (fonctionnellement identique mais plus explicite) dans votre propre code. Appelez-le comme suit:

onRangeChange(myRangeInputElmt, myListener);

où myRangeInputElmtest votre <input type="range">élément DOM souhaité et myListenerest la fonction d'écoute / gestionnaire que vous souhaitez invoquer lors d' "change"événements similaires.

Votre auditeur peut être sans paramètre si vous le souhaitez ou peut utiliser le eventparamètre, c'est-à-dire que l'un des éléments suivants fonctionnerait, selon vos besoins:

var myListener = function() {...

ou

var myListener = function(evt) {...

(La suppression de l'écouteur d'événements de l' inputélément (par exemple en utilisant removeEventListener) n'est pas traitée dans cette réponse.)

Description de la démonstration:

Dans l'extrait de code ci-dessous, la fonction onRangeChangefournit la solution universelle. Le reste du code est simplement un exemple pour démontrer son utilisation. Toute variable qui commence par my...n'est pas pertinente pour la solution universelle et n'est présente que pour la démonstration.

La démonstration montre la plage / valeur du curseur ainsi que le nombre de fois la norme "change", "input"et sur mesure des "onRangeChange"événements ont tiré (lignes A, B et C respectivement). Lorsque vous exécutez cet extrait dans différents navigateurs, notez les points suivants lorsque vous interagissez avec la plage / le curseur:

• Dans IE11, les valeurs des lignes A et C changent toutes les deux dans les scénarios 2 et 3 ci-dessus tandis que la ligne B ne change jamais.
• Dans Chrome et Safari, les valeurs des lignes B et C changent toutes les deux dans les scénarios 2 et 3 tandis que la ligne A change uniquement pour le scénario 5.
• Dans Firefox, la valeur de la ligne A ne change que pour le scénario 5, la ligne B change pour les cinq scénarios et la ligne C ne change que pour les scénarios 2 et 3.
• Dans tous les navigateurs ci-dessus, les modifications de la ligne C (la solution proposée) sont identiques, c'est-à-dire uniquement pour les scénarios 2 et 3.

Code de démonstration:

// main function for emulating IE11's "change" event:

function onRangeChange(rangeInputElmt, listener) {

  var inputEvtHasNeverFired = true;

  var rangeValue = {current: undefined, mostRecent: undefined};
  
  rangeInputElmt.addEventListener("input", function(evt) {
    inputEvtHasNeverFired = false;
    rangeValue.current = evt.target.value;
    if (rangeValue.current !== rangeValue.mostRecent) {
      listener(evt);
    }
    rangeValue.mostRecent = rangeValue.current;
  });

  rangeInputElmt.addEventListener("change", function(evt) {
    if (inputEvtHasNeverFired) {
      listener(evt);
    }
  }); 

}

// example usage:

var myRangeInputElmt = document.querySelector("input"          );
var myRangeValPar    = document.querySelector("#rangeValPar"   );
var myNumChgEvtsCell = document.querySelector("#numChgEvtsCell");
var myNumInpEvtsCell = document.querySelector("#numInpEvtsCell");
var myNumCusEvtsCell = document.querySelector("#numCusEvtsCell");

var myNumEvts = {input: 0, change: 0, custom: 0};

var myUpdate = function() {
  myNumChgEvtsCell.innerHTML = myNumEvts["change"];
  myNumInpEvtsCell.innerHTML = myNumEvts["input" ];
  myNumCusEvtsCell.innerHTML = myNumEvts["custom"];
};

["input", "change"].forEach(function(myEvtType) {
  myRangeInputElmt.addEventListener(myEvtType,  function() {
    myNumEvts[myEvtType] += 1;
    myUpdate();
  });
});

var myListener = function(myEvt) {
  myNumEvts["custom"] += 1;
  myRangeValPar.innerHTML = "range value: " + myEvt.target.value;
  myUpdate();
};

onRangeChange(myRangeInputElmt, myListener);

table {
  border-collapse: collapse;  
}
th, td {
  text-align: left;
  border: solid black 1px;
  padding: 5px 15px;
}

<input type="range"/>
<p id="rangeValPar">range value: 50</p>
<table>
  <tr><th>row</th><th>event type                     </th><th>number of events    </th><tr>
  <tr><td>A</td><td>standard "change" events         </td><td id="numChgEvtsCell">0</td></tr>
  <tr><td>B</td><td>standard "input" events          </td><td id="numInpEvtsCell">0</td></tr>
  <tr><td>C</td><td>new custom "onRangeChange" events</td><td id="numCusEvtsCell">0</td></tr>
</table>

Crédit:

Bien que l'implémentation ici soit largement la mienne, elle a été inspirée par la réponse de MBourne . Cette autre réponse suggérait que les événements «entrée» et «changement» pouvaient être fusionnés et que le code résultant fonctionnerait à la fois sur les navigateurs de bureau et mobiles. Cependant, le code dans cette réponse entraîne le déclenchement d'événements "supplémentaires" cachés, ce qui en soi est problématique, et les événements déclenchés diffèrent entre les navigateurs, un autre problème. Ma mise en œuvre ici résout ces problèmes.

Mots clés:

Événements du curseur de plage de type d'entrée JavaScript changer la compatibilité du navigateur d'entrée cross-browser desktop mobile no-jQuery

Je poste cela comme une réponse, car il mérite d'être sa propre réponse plutôt qu'un commentaire sous une réponse moins utile. Je trouve cette méthode bien meilleure que la réponse acceptée car elle peut conserver tous les js dans un fichier séparé du HTML.

Réponse donnée par Jamrelian dans son commentaire sous la réponse acceptée.

$("#myelement").on("input change", function() {
    //do something
});

Mais soyez conscient de ce commentaire de Jaime

Notez simplement qu'avec cette solution, en chrome, vous recevrez deux appels au gestionnaire (un par événement), donc si vous vous souciez de cela, vous devez vous prémunir contre cela.

Comme dans, il déclenchera l'événement lorsque vous aurez arrêté de déplacer la souris, puis à nouveau lorsque vous relâcherez le bouton de la souris.

Mettre à jour

En ce qui concerne l' changeévénement et l' inputévénement provoquant le déclenchement de la fonctionnalité deux fois, il s'agit à peu près d'un problème.

Si une fonction est activée input, il est extrêmement peu probable qu'il y ait un problème lorsque l' changeévénement se déclenche.

inputse déclenche rapidement lorsque vous faites glisser un curseur d'entrée de plage. S'inquiéter d'un appel de fonction supplémentaire à la fin, c'est comme s'inquiéter d'une seule goutte d'eau par rapport à l'océan d'eau qui est les inputévénements.

La raison de même d'inclure l' changeévénement est pour la compatibilité du navigateur (principalement avec IE).

MISE À JOUR: Je laisse cette réponse ici comme un exemple de la façon d'utiliser les événements de souris pour utiliser les interactions plage / curseur dans les navigateurs de bureau (mais pas mobiles). Cependant, j'ai également écrit une réponse complètement différente et, je crois, meilleure ailleurs dans cette page qui utilise une approche différente pour fournir une solution de bureau et mobile multi-navigateur à ce problème.

Réponse originale:

Résumé: Une solution JavaScript multi-navigateur simple (c'est-à-dire no-jQuery) pour permettre la lecture des valeurs d'entrée de plage sans utiliser on('input'...et / ou on('change'...qui fonctionnent de manière incohérente entre les navigateurs.

À ce jour (fin février 2016), il y a toujours une incohérence du navigateur, donc je propose une nouvelle solution ici.

Le problème: lorsque vous utilisez une entrée de plage, c'est-à-dire un curseur, on('input'...fournit des valeurs de plage mises à jour en continu dans Mac et Windows Firefox, Chrome et Opera ainsi que Mac Safari, tout en on('change'...ne signalant la valeur de la plage qu'à la souris. En revanche, dans Internet Explorer (v11), on('input'...ne fonctionne pas du tout et on('change'...est continuellement mis à jour.

Je rapporte ici 2 stratégies pour obtenir des rapports de valeurs de plage continue identiques dans tous les navigateurs utilisant JavaScript vanille (c'est-à-dire sans jQuery) en utilisant les événements mousedown, mousemove et (éventuellement) mouseup.

Stratégie 1: plus courte mais moins efficace

Si vous préférez un code plus court à un code plus efficace, vous pouvez utiliser cette 1ère solution qui utilise mousesdown et mousemove mais pas mouseup. Cela lit le curseur selon les besoins, mais continue de tirer inutilement pendant les événements de survol, même lorsque l'utilisateur n'a pas cliqué et ne fait donc pas glisser le curseur. Il lit essentiellement la valeur de la plage à la fois après «mousedown» et pendant les événements «mousemove», retardant légèrement chaque utilisation requestAnimationFrame.

var rng = document.querySelector("input");

read("mousedown");
read("mousemove");
read("keydown"); // include this to also allow keyboard control

function read(evtType) {
  rng.addEventListener(evtType, function() {
    window.requestAnimationFrame(function () {
      document.querySelector("div").innerHTML = rng.value;
      rng.setAttribute("aria-valuenow", rng.value); // include for accessibility
    });
  });
}

<div>50</div><input type="range"/>

Stratégie 2: plus longue mais plus efficace

Si vous avez besoin d'un code plus efficace et pouvez tolérer une longueur de code plus longue, vous pouvez utiliser la solution suivante qui utilise mousedown, mousemove et mouseup. Cela lit également le curseur selon les besoins, mais arrête correctement sa lecture dès que le bouton de la souris est relâché. La différence essentielle est qu'il ne commence à écouter «mousemove» qu'après «mousedown», et qu'il arrête d'écouter «mousemove» après «mouseup».

var rng = document.querySelector("input");

var listener = function() {
  window.requestAnimationFrame(function() {
    document.querySelector("div").innerHTML = rng.value;
  });
};

rng.addEventListener("mousedown", function() {
  listener();
  rng.addEventListener("mousemove", listener);
});
rng.addEventListener("mouseup", function() {
  rng.removeEventListener("mousemove", listener);
});

// include the following line to maintain accessibility
// by allowing the listener to also be fired for
// appropriate keyboard events
rng.addEventListener("keydown", listener);

<div>50</div><input type="range"/>

Démo: Explication plus complète de la nécessité et de la mise en œuvre des solutions de contournement ci-dessus

Le code suivant illustre plus en détail de nombreux aspects de cette stratégie. Des explications sont intégrées dans la démonstration:

var select, inp, listen, unlisten, anim, show, onInp, onChg, onDn1, onDn2, onMv1, onMv2, onUp, onMvCombo1, onDnCombo1, onUpCombo2, onMvCombo2, onDnCombo2;

select   = function(selctr)     { return document.querySelector(selctr);      };
inp = select("input");
listen   = function(evtTyp, cb) { return inp.   addEventListener(evtTyp, cb); };
unlisten = function(evtTyp, cb) { return inp.removeEventListener(evtTyp, cb); };
anim     = function(cb)         { return window.requestAnimationFrame(cb);    };
show = function(id) {
	return function() {
    select("#" + id + " td~td~td"   ).innerHTML = inp.value;
    select("#" + id + " td~td~td~td").innerHTML = (Math.random() * 1e20).toString(36); // random text
  };
};

onInp      =                  show("inp" )                                      ;
onChg      =                  show("chg" )                                      ;
onDn1      =                  show("mdn1")                                      ;
onDn2      = function() {anim(show("mdn2"));                                   };
onMv1      =                  show("mmv1")                                      ;
onMv2      = function() {anim(show("mmv2"));                                   };
onUp       =                  show("mup" )                                      ;
onMvCombo1 = function() {anim(show("cmb1"));                                   };
onDnCombo1 = function() {anim(show("cmb1"));   listen("mousemove", onMvCombo1);};
onUpCombo2 = function() {                    unlisten("mousemove", onMvCombo2);};
onMvCombo2 = function() {anim(show("cmb2"));                                   };
onDnCombo2 = function() {anim(show("cmb2"));   listen("mousemove", onMvCombo2);};

listen("input"    , onInp     );
listen("change"   , onChg     );
listen("mousedown", onDn1     );
listen("mousedown", onDn2     );
listen("mousemove", onMv1     );
listen("mousemove", onMv2     );
listen("mouseup"  , onUp      );
listen("mousedown", onDnCombo1);
listen("mousedown", onDnCombo2);
listen("mouseup"  , onUpCombo2);

table {border-collapse: collapse; font: 10pt Courier;}
th, td {border: solid black 1px; padding: 0 0.5em;}
input {margin: 2em;}
li {padding-bottom: 1em;}

<p>Click on 'Full page' to see the demonstration properly.</p>
<table>
  <tr><th></th><th>event</th><th>range value</th><th>random update indicator</th></tr>
  <tr id="inp" ><td>A</td><td>input                                </td><td>100</td><td>-</td></tr>
  <tr id="chg" ><td>B</td><td>change                               </td><td>100</td><td>-</td></tr>
  <tr id="mdn1"><td>C</td><td>mousedown                            </td><td>100</td><td>-</td></tr>
  <tr id="mdn2"><td>D</td><td>mousedown using requestAnimationFrame</td><td>100</td><td>-</td></tr>
  <tr id="mmv1"><td>E</td><td>mousemove                            </td><td>100</td><td>-</td></tr>
  <tr id="mmv2"><td>F</td><td>mousemove using requestAnimationFrame</td><td>100</td><td>-</td></tr>
  <tr id="mup" ><td>G</td><td>mouseup                              </td><td>100</td><td>-</td></tr>
  <tr id="cmb1"><td>H</td><td>mousedown/move combo                 </td><td>100</td><td>-</td></tr>
  <tr id="cmb2"><td>I</td><td>mousedown/move/up combo              </td><td>100</td><td>-</td></tr>
</table>
<input type="range" min="100" max="999" value="100"/>
<ol>
  <li>The 'range value' column shows the value of the 'value' attribute of the range-type input, i.e. the slider. The 'random update indicator' column shows random text as an indicator of whether events are being actively fired and handled.</li>
  <li>To see browser differences between input and change event implementations, use the slider in different browsers and compare A and&nbsp;B.</li>
  <li>To see the importance of 'requestAnimationFrame' on 'mousedown', click a new location on the slider and compare C&nbsp;(incorrect) and D&nbsp;(correct).</li>
  <li>To see the importance of 'requestAnimationFrame' on 'mousemove', click and drag but do not release the slider, and compare E&nbsp;(often 1&nbsp;pixel behind) and F&nbsp;(correct).</li>
  <li>To see why an initial mousedown is required (i.e. to see why mousemove alone is insufficient), click and hold but do not drag the slider and compare E&nbsp;(incorrect), F&nbsp;(incorrect) and H&nbsp;(correct).</li>
  <li>To see how the mouse event combinations can provide a work-around for continuous update of a range-type input, use the slider in any manner and note whichever of A or B continuously updates the range value in your current browser. Then, while still using the slider, note that H and I provide the same continuously updated range value readings as A or B.</li>
  <li>To see how the mouseup event reduces unnecessary calculations in the work-around, use the slider in any manner and compare H and&nbsp;I. They both provide correct range value readings. However, then ensure the mouse is released (i.e. not clicked) and move it over the slider without clicking and notice the ongoing updates in the third table column for H but not&nbsp;I.</li>
</ol>

Les solutions d'Andrew Willem ne sont pas compatibles avec les appareils mobiles.

Voici une modification de sa deuxième solution qui fonctionne dans Edge, IE, Opera, FF, Chrome, iOS Safari et équivalents mobiles (que j'ai pu tester):

Mise à jour 1: Suppression de la partie "requestAnimationFrame", car je reconnais que ce n'est pas nécessaire:

var listener = function() {
  // do whatever
};

slider1.addEventListener("input", function() {
  listener();
  slider1.addEventListener("change", listener);
});
slider1.addEventListener("change", function() {
  listener();
  slider1.removeEventListener("input", listener);
}); 

Mise à jour 2: réponse à la réponse mise à jour du 2 juin 2016 d'Andrew:

Merci, Andrew - cela semble fonctionner dans tous les navigateurs que j'ai pu trouver (bureau Win: IE, Chrome, Opera, FF; Android Chrome, Opera et FF, iOS Safari).

Mise à jour 3: solution if ("oninput in slider)

Les éléments suivants semblent fonctionner sur tous les navigateurs ci-dessus. (Je ne trouve pas la source d'origine maintenant.) J'utilisais cela, mais cela a échoué par la suite sur IE et j'ai donc cherché une autre, donc je me suis retrouvé ici.

if ("oninput" in slider1) {
    slider1.addEventListener("input", function () {
        // do whatever;
    }, false);
}

Mais avant de vérifier votre solution, j'ai remarqué que cela fonctionnait à nouveau dans IE - il y avait peut-être un autre conflit.

Pour un bon comportement entre navigateurs et un code compréhensible, le mieux est d'utiliser l'attribut onchange en combinaison d'un formulaire:

function showVal(){
  valBox.innerHTML = inVal.value;

}

<form onchange="showVal()">
  <input type="range" min="5" max="10" step="1" id="inVal">
  </form>

<span id="valBox">
  </span>

De même en utilisant oninput , la valeur est modifiée directement.

function showVal(){
  valBox.innerHTML = inVal.value;

}

<form oninput="showVal()">
  <input type="range" min="5" max="10" step="1" id="inVal">
  </form>

<span id="valBox">
  </span>

Encore une autre approche - il suffit de définir un indicateur sur un élément pour signaler le type d'événement à gérer:

function setRangeValueChangeHandler(rangeElement, handler) {
    rangeElement.oninput = (event) => {
        handler(event);
        // Save flag that we are using onInput in current browser
        event.target.onInputHasBeenCalled = true;
    };

    rangeElement.onchange = (event) => {
        // Call only if we are not using onInput in current browser
        if (!event.target.onInputHasBeenCalled) {
            handler(event);
        }
    };
}

Vous pouvez utiliser l'événement JavaScript "ondrag" pour tirer en continu. C'est mieux que "entrée" pour les raisons suivantes:

1. Prise en charge du navigateur.

2. Pourrait faire la différence entre l'événement «ondrag» et l'événement «change». "input" se déclenche à la fois par glisser-déplacer.

Dans jQuery:

$('#sample').on('drag',function(e){

});

Référence: http://www.w3schools.com/TAgs/ev_ondrag.asp