En aquest article s'explica com gestionar els esdeveniments de canvi editables de contingut a JavaScript i ho explica amb l'ajuda d'un exemple.
Com gestionar els esdeveniments de canvi editables de contingut a JavaScript?
El contingut editable és un atribut enumerat. L'usuari pot fer canvis en el contingut tenint en compte les seves necessitats. Si està permès, el navegador modifica el seu giny per permetre modificar els elements.
Quins valors són permesos per un esdeveniment de canvi editable?
El contingut editable pot prendre qualsevol d'aquests valors:
- Només text pla significa que el text original es pot editar tot i que el format de text enriquit està desactivat.
- Una cadena buida o true que significa que l'element es pot editar.
- fals que implica que l'element no es pot editar.
Exemple
L'exemple següent explica com es pot utilitzar el contingut editable en una pàgina web. Vegem el codi següent per entendre-lo millor:
HTML
Aquí hi ha un codi HTML que explica l'ús dels esdeveniments de canvi editables:
< cita de bloc contingut editable = 'veritat' >
< h3 > EDITA EL TEU CONTINGUT AQUÍ! < / h3 >
< / cita de bloc >
Al codi HTML anterior:
- Es crea una etiqueta blockquote amb l'atribut contenteditable definit com a true. Això permetrà editar el contingut de l'etiqueta blockquote.
- Hi ha una etiqueta h3 dins de l'etiqueta blockquote. Diu “EDITA EL TEU CONTINGUT AQUÍ!”, ja que està present dins de la
, el que significa que el contingut pot ser editat per l'usuari.
CSS
Per fer que el nostre codi sigui visualment atractiu, hem utilitzat el següent codi CSS:
cita de bloc {
fons : peachpuff ;
frontera-radi : 10 píxels ;
marge : 10 píxels ;
}
cita de bloc h3 {
farciment : 10 píxels ;
}
En el codi CSS anterior:
- El fons de l'etiqueta blockquote està configurat per tenir un color préssec amb un radi de vora de 10 píxels i un marge de 10 píxels.
- L'encapçalament h3 dins de la quota de bloc està configurat per tenir un farciment de 10 píxels.
Sortida :
La sortida següent explica com es pot editar el contingut mitjançant l'esdeveniment de canvi contenteditable a JavaScript:
Importància de l'edició del contingut
- Augment de la interactivitat ja que l'usuari pot modificar el contingut de manera còmoda.
- La personalització còmoda com a programador amb l'ajuda de JavaScript pot crear comportaments modificats com ara l'estalvi automàtic, activant diferents accions en funció de l'entrada de l'usuari.
- Ajuda a racionalitzar el procés d'edició permetent a l'usuari editar de forma dinàmica sense necessitat d'un camp de text separat.
Conclusió
Els esdeveniments de canvi editables a JavaScript permeten a l'usuari modificar el contingut fent que la pàgina web respongui i es pugui personalitzar. Això obre el camí cap al desenvolupament web centrat en l'usuari, on un usuari pot editar el contingut d'una pàgina web en temps real, permetent una experiència d'usuari més sensible. En aquest article es va parlar de com gestionar els esdeveniments de canvi editables de contingut a JavaScript i ho va explicar amb l'ajuda d'un exemple.