Tässä artikkelissa käsitellään sisältöä muokattavissa olevien muutostapahtumien käsittelemistä JavaScriptissä ja selitetään se esimerkin avulla.
Kuinka käsitellä sisältöä muokattavissa olevia muutostapahtumia JavaScriptissä?
Sisällönmuodostettava on lueteltu attribuutti. Käyttäjä voi tehdä muutoksia sisältöön tarpeidensa mukaan. Jos se on sallittua, selain muuttaa widgettiään salliakseen elementtien muokkaamisen.
Mitkä arvot ovat sallittuja tyydyttävässä muutostapahtumassa?
Sisällyttävällä voi olla jompikumpi seuraavista arvoista:
- pelkkä teksti tarkoittaa, että alkuperäistä tekstiä voidaan muokata, vaikka RTF-muotoilu on poistettu käytöstä.
- Tyhjä merkkijono tai tosi, mikä tarkoittaa, että elementtiä voidaan muokata.
- false, mikä tarkoittaa, että elementtiä ei voi muokata.
Esimerkki
Seuraava esimerkki selittää, kuinka muokattavaa sisältöä voidaan käyttää verkkosivulla. Katsotaanpa alla olevaa koodia ymmärtääksemme sitä paremmin:
HTML
Tässä on HTML-koodi, joka selittää sisällön muokattavien muutostapahtumien käytön:
< lohkolainaus tyytyväisiä = 'totta' >
< h3 > MUOKKAA SISÄLTÖÄSI TÄSTÄ! < / h3 >
< / lohkolainaus >
Yllä olevassa HTML-koodissa:
- Blockquote-tagi luodaan siten, että attribuutin contenteditable arvo on tosi. Tämä mahdollistaa blockquote-tunnisteen sisällä olevan sisällön muokkaamisen.
- H3-tunniste on blockquote-tunnisteen sisällä. Siinä lukee 'MUOKKAA SISÄLTÖÄSI TÄSSÄ!', koska se on
-kohdan sisällä, mikä tarkoittaa, että käyttäjä voi muokata sisältöä.
CSS
Jotta koodimme olisi visuaalisesti houkutteleva, olemme käyttäneet seuraavaa CSS-koodia:
lohkolainaus {
tausta : persikkapuhvi ;
raja-säde : 10px ;
marginaali : 10px ;
}
lohkolainaus h3 {
pehmuste : 10px ;
}
Yllä olevassa CSS-koodissa:
- Lainaustunnisteen tausta on asetettu persikkaväriseksi, reunuksen säde on 10 kuvapistettä ja marginaali 10 kuvapistettä.
- Lainauksen sisällä oleva h3-otsikko on asetettu täyttämään 10 kuvapistettä.
Lähtö :
Seuraava tulos selittää, kuinka sisältöä voidaan muokata JavaScriptin contenteditable change -tapahtuman avulla:
Sisällön muokkaamisen tärkeys
- Lisääntynyt interaktiivisuus, koska käyttäjä voi muokata sisältöä kätevästi.
- Kätevä räätälöinti ohjelmoijana JavaScriptin avulla voi luoda muunneltuja käyttäytymismalleja, kuten automaattista tallennusta, joka laukaisee erilaisia toimintoja käyttäjän syötteen perusteella.
- Auttaa virtaviivaistamaan muokkausprosessia, jolloin käyttäjä voi muokata dynaamisesti ilman erillistä tekstikenttää.
Johtopäätös
JavaScriptin sisältöä muokattavissa olevat muutostapahtumat antavat käyttäjälle mahdollisuuden muokata sisältöä tehden verkkosivusta responsiivisen ja muokattavan. Tämä tasoittaa tietä käyttäjäkeskeiselle verkkokehitykselle, jossa käyttäjä voi muokata verkkosivun sisältöä reaaliajassa, mikä mahdollistaa responsiivisemman käyttökokemuksen. Tässä artikkelissa käsiteltiin sisältöä muokattavien muutostapahtumien käsittelemistä JavaScriptissä ja selitettiin se esimerkin avulla.