Tipy a triky - ako zaujímavo použiť element textarea

Element <textarea> je najčastejšie v dokumentoch používaný ako pole pre vkladanie viacriadkového textového obsahu. Túto vlastnosť je možné využiť aj pre vytvorenie dokumentu HTML s podobným správaním ako majú textové editory. Pre sfunkčnenie uvedeného kódu je možné použiť šablónu dokumentu HTML5.

Ako prvé je potrebné definovať CSS, ktorým sa zamaskuje element <textarea> v dokumente.

Príklad: Zápis do elementu <style>.

1
2
3
4
5
6
7
8
9
10
11
12
#editor {
  border : 0;
  overflow: hidden;
  resize: none;
  margin : 0; 
  width : 100%;
  height : 600px;
}
#editor:focus {
  border : 0;
  outline: 0;
}
#editor {
  border : 0;
  overflow: hidden;
  resize: none;
  margin : 0; 
  width : 100%;
  height : 600px;
}
#editor:focus {
  border : 0;
  outline: 0;
}

Ďalším krokom je vytvorenie elementu <textarea>.

Príklad: Zápis do elementu <body>.

1
<textarea id="editor"></textarea>
<textarea id="editor"></textarea>

Posledným krokom je nastavenie kurzora do oblasti pre písanie.

Príklad: Zápis do elementu <script>.

1
document.getElementById("editor").focus();
document.getElementById("editor").focus();  

Záver

Ako vidieť, tento krátky kód vytvorí zaujímavý efekt simulujúci správanie textového editora.

Tipy a triky - ako zaujímavo použiť element textarea

Záver

Komentáre

Pridať komentár