Pourquoi Firefox se comporte-t-il différemment dans la gestion des événements « Onchange » pour les entrées de plage ?

Input Type=Range Onchange Event Behavior Différence dans Firefox

Énoncé du problème :

Pendant que en utilisant , Firefox déclenche l'événement 'onchange' uniquement lorsque le curseur est déposé dans une nouvelle position, alors que d'autres navigateurs comme Chrome lancent l'événement pendant l'opération de glisser.

Solution :

La différence de comportement est due aux différentes implémentations de navigateur de l'événement 'onchange'. Conformément aux spécifications HTML, « onchange » ne doit s'exécuter que lorsque la valeur du champ de saisie est finalisée (par exemple, lorsque la souris est relâchée).

Pour remédier à cette disparité, la solution suivante peut être utilisée :

Utilisez l'événement « oninput », qui capture les changements de valeur à la fois lors des déplacements de la souris et des saisies au clavier, offrant ainsi un comportement cohérent entre les navigateurs.

Cependant, « oninput » n'est pas pris en charge dans IE10. Par conséquent, pour une compatibilité complète, 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>

En incorporant cette approche, les événements « onchange » seront déclenchés de manière cohérente dans Firefox, Safari et Chrome, tandis que assurant également la compatibilité avec IE10.

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!