Denne artikel diskuterer, hvordan man håndterer indholdsredigerbare ændringshændelser i JavaScript og forklarer det ved hjælp af et eksempel.
Hvordan håndterer man indholdsredigerbare ændringshændelser i JavaScript?
Den indholdsredigerbare er en opregnet attribut. Brugeren kan foretage ændringer i indholdet under hensyntagen til deres krav. Hvis det er tilladt, ændrer browseren sin widget for at tillade ændring af elementerne.
Hvilke værdier er tilladte af en indholdsredigerbar ændringshændelse?
Den indholdsredigerbare kan have en af disse værdier:
- plaintext-only repræsenterer, at den originale tekst kan redigeres, selvom rich text-formatering er deaktiveret.
- En tom streng eller true som betyder at elementet kan redigeres.
- falsk, hvilket betyder, at elementet ikke kan redigeres.
Eksempel
Følgende eksempel forklarer, hvordan indhold, der kan redigeres, kan bruges på en webside. Lad os se på koden nedenfor for at forstå den bedre:
HTML
Her er en HTML-kode, der forklarer brugen af de indholdsredigerbare ændringshændelser:
< blokcitat indholdsredigerbar = 'rigtigt' >
< h3 > REDIGER DIT INDHOLD HER! < / h3 >
< / blokcitat >
I ovenstående HTML-kode:
- Et blockquote-tag oprettes med attributten contenteditable sat til true. Dette vil gøre det muligt at redigere indholdet inde i blockquote-tagget.
- Et h3-tag er til stede inde i blockquote-tagget. Der står 'EDIT YOUR CONTENT HERE!', da det er til stede inde i
, hvilket betyder, at indholdet kan redigeres af brugeren.
CSS
For at gøre vores kode visuelt tiltalende har vi brugt følgende CSS-kode:
blokcitat {
baggrund : ferskenpust ;
grænse-radius : 10px ;
margen : 10px ;
}
blokcitat h3 {
polstring : 10px ;
}
I ovenstående CSS-kode:
- Blockquote-tagbaggrunden er indstillet til at have en ferskenfarve med en kantradius på 10px og en margen på 10px.
- h3-overskriften inde i blockquote er indstillet til at have en polstring på 10px.
Produktion :
Følgende output forklarer, hvordan indholdet kan redigeres ved hjælp af indholdsredigerbar ændringshændelse i JavaScript:
Vigtigheden af at redigere indholdet
- Øget interaktivitet, da brugeren nemt kan ændre indholdet.
- Praktisk tilpasning som programmør ved hjælp af JavaScript kan skabe ændret adfærd som autolagring, der udløser forskellige handlinger baseret på brugerens input.
- Hjælper med at strømline redigeringsprocessen, så brugeren kan redigere dynamisk uden behov for et separat tekstfelt.
Konklusion
De indholdsredigerbare ændringshændelser i JavaScript gør det muligt for brugeren at ændre indholdet, hvilket gør websiden responsiv og tilpasselig. Dette baner vejen for brugercentreret webudvikling, hvor en bruger kan redigere indholdet på en webside i realtid, hvilket muliggør en mere responsiv brugeroplevelse. Denne artikel diskuterede, hvordan man håndterer indholdsredigerbare ændringshændelser i JavaScript og forklarede det ved hjælp af et eksempel.