Comment afficher la valeur du curseur de plage dans une zone de texte sans JavaScript ?

Affichage de la valeur du curseur de plage dans une zone de texte sans JavaScript

Lors de la création d'un site Web utilisant un curseur de plage, la possibilité d'afficher la valeur actuelle de la diapositive dans une zone de texte peut être un ajout précieux. Bien que cela semble être une tâche simple, elle peut être réalisée sans recourir à JavaScript ou à jQuery.

Pour ce faire, vous pouvez capitaliser sur la plage de types d'entrée HTML5 et son écouteur d'événement oninput. En attribuant un événement oninput à l'entrée de plage, vous pouvez manipuler la valeur d'un élément de sortie adjacent, reproduisant ainsi efficacement le comportement souhaité.

Considérez l'extrait de code suivant :

<input type="range" value="24" min="1" max="100" oninput="this.nextElementSibling.value = this.value">
<output>24</output>

Dans ce Par exemple, le gestionnaire d'événements oninput définit la valeur textuelle de l'élément de sortie qui suit immédiatement l'entrée de plage pour qu'elle corresponde à la valeur actuelle du curseur de plage. Au fur et à mesure que le curseur est ajusté, la valeur affichée est mise à jour en temps réel, reflétant la fonctionnalité traditionnellement obtenue via JavaScript ou jQuery.

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!