Comment puis-je afficher une valeur de curseur dans une zone de texte en utilisant uniquement HTML et CSS ?

Affichage de la valeur du curseur dans une zone de texte à l'aide de HTML et CSS

Dans une application Web, vous pouvez rencontrer le besoin d'afficher simultanément la valeur actuelle d'un curseur de plage dans une zone de texte correspondante. Bien que JavaScript ou jQuery soient des solutions populaires, il est possible d'y parvenir sans utiliser de code externe.

Pour afficher la valeur du curseur dans une zone de texte en utilisant uniquement HTML et CSS, vous pouvez exploiter l'événement oninput et l'attribut value du élément de plage d’entrée. La syntaxe est la suivante :

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

Dans cet exemple, lorsque l'utilisateur ajuste le curseur, la propriété this.value renverra la valeur mise à jour. L'écouteur d'événement oninput attribue cette valeur à la propriété value de l'élément de sortie, qui affiche la valeur actuelle du curseur sous forme de texte. Par conséquent, à mesure que le curseur se déplace, la valeur dans la zone de texte sera mise à jour dynamiquement pour refléter le changement.

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!