Denne artikkelen diskuterer hvordan du håndterer innholdsredigerbare endringshendelser i JavaScript og forklarer det ved hjelp av et eksempel.
Hvordan håndtere innholdsredigerbare endringshendelser i JavaScript?
Den innholdsredigerbare er et opplistet attributt. Brukeren kan gjøre endringer i innholdet med tanke på deres krav. Hvis det er tillatt, endrer nettleseren sin widget for å tillate endring av elementene.
Hvilke verdier er tillatt av en innholdsredigerbar endringshendelse?
Den innholdsredigerbare kan ha en av disse verdiene:
- Bare ren tekst representerer at originalteksten kan redigeres selv om rik tekstformatering er deaktivert.
- En tom streng eller true som betyr at elementet kan redigeres.
- usann som antyder at elementet ikke kan redigeres.
Eksempel
Følgende eksempel forklarer hvordan redigerbart innhold kan brukes på en nettside. La oss se på koden nedenfor for å forstå den bedre:
HTML
Her er en HTML-kode som forklarer bruken av innholdsredigerbare endringshendelser:
< blokksitat innholdsredigerbar = 'ekte' >
< h3 > REDIGER INNHOLDET DITT HER! < / h3 >
< / blokksitat >
I HTML-koden ovenfor:
- En blockquote-tag lages med attributtet contenteditable satt til true. Dette vil gjøre det mulig å redigere innholdet i blockquote-taggen.
- En h3-tag er til stede inne i blockquote-taggen. Det står 'REDIG INNHOLDET DIT HER!', ettersom det er tilstede inne i
, noe som betyr at innholdet kan redigeres av brukeren.
CSS
For å gjøre koden vår visuelt tiltalende, har vi brukt følgende CSS-kode:
blokksitat {
bakgrunn : ferskenpust ;
grense-radius : 10 piksler ;
margin : 10 piksler ;
}
blokksitat h3 {
polstring : 10 piksler ;
}
I CSS-koden ovenfor:
- Blockquote-tagbakgrunnen er satt til å ha en ferskenfarge med en kantradius på 10px og en margin på 10px.
- H3-overskriften inne i blockquote er satt til å ha en polstring på 10px.
Produksjon :
Følgende utdata forklarer hvordan innholdet kan redigeres ved å bruke innholdsredigerbar endringshendelse i JavaScript:
Viktigheten av å redigere innholdet
- Økt interaktivitet ettersom brukeren enkelt kan endre innholdet.
- Praktisk tilpasning som programmerer ved hjelp av JavaScript kan skape modifisert atferd som autolagring, og utløse forskjellige handlinger basert på brukerinndata.
- Hjelper med å strømlinjeforme redigeringsprosessen slik at brukeren kan redigere dynamisk uten behov for et eget tekstfelt.
Konklusjon
De innholdsredigerbare endringshendelsene i JavaScript gjør det mulig for brukeren å endre innholdet og gjøre nettsiden responsiv og tilpassbar. Dette baner vei for brukersentrisk nettutvikling der en bruker kan redigere innholdet på en nettside i sanntid, noe som muliggjør en mer responsiv brukeropplevelse. Denne artikkelen diskuterte hvordan man håndterer innholdsredigerbare endringshendelser i JavaScript og forklarte det ved hjelp av et eksempel.