×
Creating solutions

Tipy a triky - ako rýchlo spraviť dokument HTML editovateľným

Jazyk HTML5 prináša nový atribút contenteditable, ktorý umožňuje editovať elementy v dokumente. A práve na tejto vlastnosti je založený nasledujúci trik, ktorý rýchlo spraví celý obsah dokumentu HTML editovateľným. Pre sfunkčnenie uvedeného kódu je možné použiť šablónu dokumentu HTML5.
Pre internetové prehliadače podporujúce vlastnosť contenteditable a metódu querySelectorAll() stačí použiť nasledujúci programový kód.
Príklad: Zápis do elementu <script>.
1
2
3
4
5
var nodes = document.querySelectorAll("body *");
var length = nodes.length, i = 0;
for (i; i < length; i++) {
nodes[i].setAttribute("contenteditable", true);
}
Pre internetové prehliadače podporujúce iba vlastnosť contenteditable je možné použiť nasledujúci programový kód.
Príklad: Zápis do elementu <script>.
1
2
3
4
5
6
var body = document.getElementsByTagName("body")[0];
var nodes = body.getElementsByTagName("*");
var length = nodes.length, i = 0;
for (i; i < length; i++) {
nodes[i].setAttribute("contenteditable", true);
}

Záver

Týmto krátkym zápisom v jazyku JavaScript je možné po kliknutí na text meniť ľubovoľný obsah v dokumente.
Autor: Matej Lednár
Dátum: 24.4.2013
Kategória: JavaScript
Značky: tipy a triky, textarea, programovanie, html, css, dom, javascript, contenteditable, queryselectorall


JavaScript,tipy a triky,textarea,programovanie,HTML,CSS,DOM,JavaScript,contenteditable,querySelectorAll
No part of this article may be reproduced without mention of the author and URL to this website.
For more information, see the About section.

Comments

Article has no comments.

Add a comment

Name (required)
Website
Message (required)
Submit
From latest