Pourquoi l'événement onchange n'est-il pas déclenché pour le glissement d'entrée de plage dans Firefox ?

L'événement Firefox onchange n'est pas déclenché lors du déplacement de l'entrée de plage

Dans les éléments d'entrée de type « plage », lorsque le curseur est déplacé, le changement L'événement n'est déclenché que lorsque le curseur est déposé à une nouvelle position dans Firefox. En revanche, Chrome et d'autres navigateurs déclenchent des événements onchange pendant le glisser.

Solution : utiliser l'événement oninput

Firefox déclenche correctement l'événement onchange uniquement lors de la publication, conformément au spécification. Pour capturer les mises à jour en direct lors du glisser-déposer dans tous les navigateurs, utilisez plutôt l'événement oninput.

<code class="html">function showVal(newVal){
    document.getElementById("valBox").innerHTML=newVal;
}</code>

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

Combiner oninput et onchange pour la compatibilité entre navigateurs

Pour compatibilité entre navigateurs, envisagez de combiner les gestionnaires d'événements oninput et onchange :

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

Cela garantit que les événements onchange sont toujours déclenchés dans Firefox lors de la sortie, tandis que les événements oninput fournissent des mises à jour continues dans tous les navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!