Cet article explique comment gérer les événements de modification modifiables en JavaScript et l'explique à l'aide d'un exemple.
Comment gérer les événements de changement modifiables par contenu en JavaScript ?
Le contenteditable est un attribut énuméré. L'utilisateur peut apporter des modifications au contenu en fonction de ses besoins. Si cela est autorisé, le navigateur modifie son widget pour permettre la modification des éléments.
Quelles valeurs sont autorisées par un événement de changement modifiable ?
Le contenteditable peut prendre l'une de ces valeurs :
- Le texte brut uniquement signifie que le texte original peut être modifié même si le formatage du texte enrichi est désactivé.
- Une chaîne vide ou true qui signifie que l'élément peut être modifié.
- false, ce qui implique que l'élément ne peut pas être modifié.
Exemple
L'exemple suivant explique comment le contenu modifiable peut être utilisé sur une page Web. Regardons le code ci-dessous pour mieux le comprendre :
HTML
Voici un code HTML qui explique l'utilisation des événements de changement contenteditable :
< citation de bloc contentmodifiable = 'vrai' >
< h3 > MODIFIEZ VOTRE CONTENU ICI ! < / h3 >
< / citation de bloc >
Dans le code HTML ci-dessus :
- Une balise blockquote est créée avec l'attribut contenteditable défini sur true. Cela permettra de modifier le contenu à l’intérieur de la balise blockquote.
- Une balise h3 est présente à l’intérieur de la balise blockquote. Il est écrit « MODIFIEZ VOTRE CONTENU ICI ! », car il est présent à l'intérieur du
, ce qui signifie que le contenu peut être modifié par l'utilisateur.
CSS
Pour rendre notre code visuellement attrayant, nous avons utilisé le code CSS suivant :
citation de bloc {
arrière-plan : chou aux pêches ;
rayon de frontière : 10px ;
marge : 10px ;
}
citation de bloc h3 {
rembourrage : 10px ;
}
Dans le code CSS ci-dessus :
- L'arrière-plan de la balise blockquote est défini pour avoir une couleur pêche avec un rayon de bordure de 10 px et une marge de 10 px.
- Le titre h3 à l’intérieur du blockquote est défini pour avoir un remplissage de 10px.
Sortir :
Le résultat suivant explique comment le contenu peut être modifié à l'aide de l'événement change contenteditable en JavaScript :
Importance de la modification du contenu
- Interactivité accrue car l'utilisateur peut modifier le contenu facilement.
- Une personnalisation pratique en tant que programmeur à l'aide de JavaScript peut créer des comportements modifiés tels que la sauvegarde automatique, déclenchant différentes actions en fonction de la saisie de l'utilisateur.
- Aide à rationaliser le processus d'édition, permettant à l'utilisateur de modifier dynamiquement sans avoir besoin d'un champ de texte séparé.
Conclusion
Les événements de changement contenteditable en JavaScript permettent à l'utilisateur de modifier le contenu, rendant la page Web réactive et personnalisable. Cela ouvre la voie à un développement Web centré sur l'utilisateur, dans lequel un utilisateur peut modifier le contenu d'une page Web en temps réel, permettant ainsi une expérience utilisateur plus réactive. Cet article explique comment gérer les événements de modification modifiables en JavaScript et l'explique à l'aide d'un exemple.