In dit artikel wordt besproken hoe u met bewerkbare wijzigingsgebeurtenissen in JavaScript omgaat en wordt dit uitgelegd aan de hand van een voorbeeld.
Hoe om te gaan met bewerkbare veranderingsgebeurtenissen in JavaScript?
De contenteditable is een opgesomd attribuut. De gebruiker kan wijzigingen in de inhoud aanbrengen, rekening houdend met zijn vereisten. Als dit is toegestaan, wijzigt de browser zijn widget om het wijzigen van de elementen mogelijk te maken.
Welke waarden zijn toegestaan bij een contenteditable change event?
De contenteditable kan een van deze waarden aannemen:
- Alleen platte tekst betekent dat de originele tekst kan worden bewerkt, ook al is de RTF-opmaak uitgeschakeld.
- Een lege string of true, wat betekent dat het element kan worden bewerkt.
- false, wat impliceert dat het element niet kan worden bewerkt.
Voorbeeld
In het volgende voorbeeld wordt uitgelegd hoe bewerkbare inhoud op een webpagina kan worden gebruikt. Laten we de onderstaande code bekijken om deze beter te begrijpen:
HTML
Hier is een HTML-code die het gebruik van de contenteditable wijzigingsgebeurtenissen uitlegt:
< blokcitaat tevredenbewerkbaar = 'WAAR' >
< h3 > BEWERK HIER UW INHOUD! < / h3 >
< / blokcitaat >
In de bovenstaande HTML-code:
- Er wordt een blockquote-tag gemaakt waarbij het attribuut contenteditable is ingesteld op true. Hierdoor kan de inhoud in de blockquote-tag worden bewerkt.
- Er is een h3-tag aanwezig in de blockquote-tag. Er staat “BEWERK UW INHOUD HIER!”, aangezien dit aanwezig is in de
, wat betekent dat de inhoud door de gebruiker kan worden bewerkt.
CSS
Om onze code visueel aantrekkelijk te maken, hebben we de volgende CSS-code gebruikt:
blokcitaat {
achtergrond : perzikbladerdeeg ;
grensradius : 10px ;
marge : 10px ;
}
blokcitaat h3 {
opvulling : 10px ;
}
In de bovenstaande CSS-code:
- De achtergrond van de blockquote-tag is ingesteld op een perzikkleur met een randradius van 10px en een marge van 10px.
- De h3-kop binnen de blockquote is ingesteld op een opvulling van 10px.
Uitvoer :
In de volgende uitvoer wordt uitgelegd hoe de inhoud kan worden bewerkt met behulp van de contenteditable change-gebeurtenis in JavaScript:
Belang van het bewerken van de inhoud
- Verhoogde interactiviteit omdat de gebruiker de inhoud gemakkelijk kan wijzigen.
- Handige aanpassingen als programmeur met behulp van JavaScript kunnen aangepast gedrag creëren, zoals automatisch opslaan, waardoor verschillende acties worden geactiveerd op basis van de gebruikersinvoer.
- Helpt het bewerkingsproces te stroomlijnen, waardoor de gebruiker dynamisch kan bewerken zonder dat er een apart tekstveld nodig is.
Conclusie
Met de contenteditable wijzigingsgebeurtenissen in JavaScript kan de gebruiker de inhoud wijzigen, waardoor de webpagina responsief en aanpasbaar wordt. Dit maakt de weg vrij voor gebruikersgerichte webontwikkeling waarbij een gebruiker de inhoud van een webpagina in realtime kan bewerken, waardoor een responsievere gebruikerservaring ontstaat. In dit artikel werd besproken hoe om te gaan met bewerkbare wijzigingsgebeurtenissen in JavaScript en werd dit uitgelegd aan de hand van een voorbeeld.