Textarea

Pro psaní delších textů na webu:

• článků,
• komentářů,
• diskusních příspěvků,
• zpráv do chatu

A pro další případy, kdy potřebujeme více řádků editovatelného textu, se používá značka <textarea> (v překladu textová oblast).

Atributy

Většinu atributů má <textarea> společných se značkou <input>.

Textarea nemá atribut value, obsah se zadává mezi počáteční a koncovou značku (počáteční i koncová značka je povinná).

<textarea>
  Obsah
</textarea>

name

Jméno políčka, podle kterého se dá následně zpracovávat na serveru.

cols

Počet sloupců. V podstatě nastavuje šířku pole. Je možné nahradit CSS vlastností width.

rows

Počet řádků. Stanovuje výšku políčka. Je možné nahradit CSS vlastností height. Někdo tyto atributy důsledně vyplňuje kvůli zobrazení bez kaskádových stylů.

wrap

Atribut wrap může nabývat hodnoty soft (výchozí) a hard. Použití wrap=hard spolu s omezením počtu znaků na řádek (atribut cols) by mělo zajistit, že v <textarea> nemůže vzniknout řádek delší než hodnota v cols. Podpora napříč prohlížeči je špatná. Navíc vždy takové ošetření musíme dělat na straně serveru. Zalamovat slova jde i v CSS přes word-wrap: break-word.

disabled

Pole je úplně zablokované. Nejde na něm vyvolat onclick a neodešle se na server.

autofocus

Po načtení stránky dá políčku rovnou focus (ukázka). Osobně takové chování nemám příliš rád, neboť přesun kursoru do pole typicky zablokuje ovládání klávesami.

placeholder

Předvyplní políčko hodnotou, která po aktivování zmizí. Zároveň se nebude odesílat na server. Detailní popis atributu placehodler je na samostatné stránce.

spellcheck

Zapne nebo vypne kontrolu pravopisu.

maxlength

Maximální počet znaků, co lze do políčka napsat.

required

Pole musí být vyplněno.

Změna velikosti

Kromě IE umí prohlížeče automaticky měnit velikost <textarea> přes tažením za okraje. Zakázat to jde CSS vlastností resize.

Přístup v JavaScriptu

Aktuální obsah pole se nachází ve vlastnosti value.

var textarea = document.getElementsByTagName("textarea")[0];
alert(textarea.value);

V případě, že je v poli nějaký předvyplněný text, je možné ho získat i přes innerHTML. Také jde obsah do innerHTML nastavit, ovšem po jakékoliv editaci už nebude vidět – přebije ho value, která se potom i odešle na server.

Ukázka rozdílů innerHTML a value

Původní hodnota (value) v době načtení stránky je dostupná skrz JS vlastnost defaultValue.

alert(textarea.defaultValue);

Formátování

Textarea jde docela dobře stylovat (ukázka).

Častým přáním je v ní odlišně zvýrazňovat jednotlivá slova. To běžně možné není. Je nutné použít element s contenteditable.

Výchozí posuvník v IE

V Internet Exploreru má <textarea> automaticky svislý posuvník. Zbavit se ho můžeme nastavení overflow: auto. Ukázka.

Počet znaků a slov

Jak počítat počty znaků a slov je popsáno na samostatné stránce.

Neinterpretování HTML značek

Zvláštní vlastnost textového pole tkví v jisté podobnosti se značkou <xmp>. Do <textarea> je totiž možné stejně tak vepsat prakticky libovolné HTML bez převádění na entity, aniž by se provedlo.

Jediný problém je další <textarea>, přesněji řečeno její koncová značka. Ukázka <textarea> / ukázka značky <xmp>.

Někdy se <textarea> také používá pro pohodlné označování textu.