Pourquoi l'événement Onchange ne tire-t-il pas au premier changement?

Question

Merci d'avoir pris le temps d'avoir lu ma question.

Une "gamme" input L'élément de HTML (curseur) tire un onchange -event, dans lequel le contenu d'un span L'élément est mis à jour avec la valeur actuelle du input élément.

D'une manière ou d'une autre, le premier changement apporté à la input L'élément ne tire pas le onchange un événement. Lorsqu'un événement «onclick» est utilisé, il tire.

Voici le code, HTML en premier:

<div>

    <input id="main_options_plug1_lengthPE_input" type="range" step="10" value="0" max="200" min="0" onchange="setOpenEndPELength('plug1');"></input>
    <span id="main_options_plug1_lengthPE_value"> … </span>

</div>

Et maintenant JavaScript:

function setOpenEndPELength(plug)
{
    if (plug == "plug1" || plug == "plug2")
    {
        var slider = document.getElementById("main_options_" + plug + "_lengthPE_input");
        var span = document.getElementById("main_options_" + plug + "_lengthPE_value");

        span.innerHTML = slider.value + " mm";
    }
}

J'ai créé un Jsfiddle, afin que vous puissiez l'essayer vous-même.

Je n'ai pas trouvé de réponse à cette question sur Stackoverflow jusqu'à présent, toutes les questions que j'ai trouvées concernaient onchange L'événement ne tire pas du tout. Dans ce cas, ce n'est que le premier changement qui ne fonctionne pas.

J'espère que quelqu'un connaît la réponse. Toute aide est grandement appréciée, merci d'avance.

Answer 1

Si je comprends correctement la question, le problème est que sur Firefox, le onchange Le gestionnaire n'est pas exécuté lorsque vous appuyez sur le bouton de la souris lorsque le curseur est sur le bouton du curseur et déplacez la souris. Il est exécuté uniquement après la libération du bouton de la souris après un tel mouvement.

Cela semble être le comportement correct (bien que certains autres navigateurs ne se conforment pas), car HTML5 CR dit sur le change un événement: «Si l'élément n'a pas de comportement d'activation défini mais utilise une interface utilisateur qui implique une action de validation explicite, alors chaque fois que l'utilisateur commet une modification de la valeur de l'élément ou de la liste des fichiers sélectionnés, l'agent utilisateur doit filer une tâche pour Fix un événement simple qui bubbles nommé change à l'élément d'entrée. »

C'est une formulation un peu compliquée, mais elle est suivie d'un exemple de clarification: «Un troisième exemple d'interface utilisateur avec une action de validation serait un contrôle de plage qui utilise un curseur. Pendant que l'utilisateur glisse le bouton du contrôle, les événements d'entrée se déclencheraient chaque fois que la position changeait, alors que l'événement de changement ne se déclencherait que lorsque l'utilisateur lâchait le bouton, s'engageant sur une valeur spécifique. »

La conclusion est que dans ce cas, vous devez utiliser le oninput attribut au lieu de onchange. En pratique, onmousemove fonctionne aussi, mais oninput est meilleur, car on peut s'attendre à ce qu'il fonctionne avec des méthodes d'entrée qui n'utilisent pas de souris (quels que soient ils pourraient être, par exemple le contrôle par voix).

Answer 2

Sur le document prêt, essayer de déclencher l'événement provoqué manuellement la première fois, un changement ne s'est pas produit.

Alors ajoutez simplement le code comme ci-dessous:

$(“#main_options_plug1_lengthPE_input”).trigger(‘change’)

Answer 3

Un petit truc, si Onchange ne tire pas la première fois, ajoutez:

onclick="console.log(1)"

Une autre action sur le clic, il tire toujours l'onChange en deuxième fois, mais comme vous avez d'abord le clic.