Acest articol discută cum să gestionați evenimentele de modificare care pot fi editate de conținut în JavaScript și îl explică cu ajutorul unui exemplu.
Cum să gestionezi evenimentele de modificare editabile în JavaScript?
Contenteditable este un atribut enumerat. Utilizatorul poate face modificări în conținut ținând cont de cerințele sale. Dacă este permis, browserul își modifică widget-ul pentru a permite modificarea elementelor.
Ce valori sunt permise de un eveniment de modificare care poate fi editat?
Conținutul editabil poate lua oricare dintre aceste valori:
- doar textul simplu înseamnă că textul original poate fi editat, deși formatarea textului îmbogățit este dezactivată.
- Un șir gol sau adevărat, ceea ce înseamnă că elementul poate fi editat.
- fals care implică faptul că elementul nu poate fi editat.
Exemplu
Următorul exemplu explică modul în care conținutul editabil poate fi utilizat pe o pagină web. Să ne uităm la codul de mai jos pentru a-l înțelege mai bine:
HTML
Iată un cod HTML care explică utilizarea evenimentelor de modificare a conținutului:
< blockquote contenteditabil = 'Adevărat' >
< h3 > EDITĂ-ȚI CONȚINUTUL AICI! < / h3 >
< / blockquote >
În codul HTML de mai sus:
- O etichetă blockquote este creată cu atributul contenteditable setat la true. Acest lucru va permite editarea conținutului din eticheta blockquote.
- O etichetă h3 este prezentă în interiorul etichetei blockquote. Scrie „EDITĂȚI CONȚINUTUL AICI!”, deoarece este prezent în interiorul
, ceea ce înseamnă că conținutul poate fi editat de către utilizator.
CSS
Pentru a face codul nostru atrăgător din punct de vedere vizual, am folosit următorul cod CSS:
blockquote {
fundal : peachpuff ;
hotar-raza : 10px ;
marginea : 10px ;
}
cota de bloc h3 {
căptușeală : 10px ;
}
În codul CSS de mai sus:
- Fundalul etichetei blockquote este setat să aibă o culoare piersică, cu o rază a marginii de 10 px și o marjă de 10 px.
- Titlul h3 din interiorul citatului bloc este setat să aibă o umplutură de 10px.
Ieșire :
Următorul rezultat explică modul în care conținutul poate fi editat utilizând evenimentul de modificare a conținutului editabil în JavaScript:
Importanța editării conținutului
- Interactivitate sporită, deoarece utilizatorul poate modifica conținutul în mod convenabil.
- Personalizarea convenabilă ca programator cu ajutorul JavaScript poate crea comportamente modificate, cum ar fi salvarea automată, declanșând diferite acțiuni în funcție de intrarea utilizatorului.
- Ajută la eficientizarea procesului de editare, permițând utilizatorului să editeze în mod dinamic, fără a fi nevoie de un câmp de text separat.
Concluzie
Evenimentele de modificare a conținutului din JavaScript permit utilizatorului să modifice conținutul, făcând pagina web receptivă și personalizabilă. Acest lucru deschide calea către dezvoltarea web centrată pe utilizator, unde un utilizator poate edita conținutul unei pagini web în timp real, permițând o experiență de utilizator mai receptivă. Acest articol a discutat cum să gestionați evenimentele de modificare care pot fi editate de conținut în JavaScript și l-a explicat cu ajutorul unui exemplu.