JS vs jQuery: Textarea { height: auto; } / automatická výška

Textarea a její ideální výška na příslušné stránce webu pro mne byla vždy problém. Již z principu je trefa do správné velikosti tohoto formulářového prvku boj s větrnými mlýny. Pro uživatele nepsavce je téměř vždy příliš velká a zabírá místo; uživatel grafoman však stále spílá nad její malou délkou.

Sám jsem se ustálil na velikosti 5 řádků, pokud krom textarey (textarei?) je na stránce ještě nějaký informační obsah.

Ideálním řešením by bylo využítí CSS stylu height:

textarea { height: auto; }

Avšak tahle definice nefunguje, a je otázkou zda fungovat někdy bude nebo je to už z principu nemožné.

Rešením je tedy použití JavaScriptu…

JS

Na svých webech jsem používal celkem tři velmi podobné řešení. Vždy se jednalo o pseudotlačítka za pomocí <A> či <IMG> s příslušným volaným JS pro akci zvětšení nebo zmenšení textarey

1/ nastavení na pevnou výšku

Tohle rešení jsem použil na Legii u diskuzních příspěvku. Vedle textarey byly celkem tři odkazy, které po kliku nastavovaly různou pevně danou výšku pro příslušnou textareu:

<!-- takto vypadaly odkazy pomocí tagu A -->
<a href="javascript:zmen_vysku('text',100)">1</a>
<a href="javascript:zmen_vysku('text',200)">2</a>
<a href="javascript:zmen_vysku('text',400)">3</a>
<!-- a definice tagu textarea -->
<textarea name="text" id="text" cols="60" rows="5">...

Tedy použitá JS funkce měla 2 parametry (snaha o univerzálnost), kdy první bylo ID tagu Textarea, který chci zvětšit, a druhý pak byl nastavovanou výškou v px.

Vlastní JS funkce pak vypadala takto:

function zmen_vysku(id, vyska) {
  document.getElementById(id).style.height = vyska+"px";
}

pozitiva

maximální velikost bylo možno nastavit jedním klikem

při častějším psaní pomocí tohoto řešení jste se naučili odhadovat tu správnou velikost pro vaši aktuální myšlenku

negativa

maximální velikost nemusela stačit

2/ nastavení zvětšení výšky o X px

Velmi podobná JS funkce mého prvního řešení – rozdíl byl v tom, že jsem měl jen 2 tlačítka – Zvětšit a Zmenšit:

<!-- jak vypadali odkazy pomocí tagu A -->
<a href="javascript:zmen_vysku('text',+100)">zvětšit</a>
<a href="javascript:zmen_vysku('text',-100)">zmenšit</a>
<!-- a definice tagu textarea stejně jako minule -->

Funkce pak přičítala druhý parametr k aktuální výšce tagu definovaného pomocí ID (první parametr). Musí se pamatovat na to, že do mínusu u výšky nelze jít, a mít textareu s výškou 1px také není pro psaní dovnitř nejvhodnější, takže kód se drobně rozrostl o zarážku:

function zmen_vysku(id, vyska) {
  akt_vyska = document.getElementById(id).clientHeight;
  nova_vyska = akt_vyska + vyska;
  if (nova_vyska < 100) {
      document.getElementById(id).style.height = "100px";
      alert('min vyska bloku pro text je 100px');
  }
  else {
    document.getElementById(id).style.height = nova_vyska+"px";
  }
}

pozitiva

maximální výška neexistuje

negativa

při nastavování velké výšky se uživatel mohl uklikat

3/ nastavení výšky násobením či dělením

Rešení opět odvozené od minulého, se snahou odstranit vyjmenované negativum – zůstavají dvě tlačítka:

<!-- jak vypadali odkazy pomocí tagu A -->
<a href="javascript:zmen_vysku('text', 1)">zvětšit</a>
<a href="javascript:zmen_vysku('text',-1)">zmenšit</a>
<!-- a definice tagu textarea stejně jako minule -->

Pričemž druhý parametr zde určuje jen logiku „zvětšit/zmenšit“. V samotné JS funkci je pak řešeno o kolik:

function zmen_vysku(id, vyska) {
  akt_vyska = document.getElementById(id).clientHeight;
  if (vyska > 0) {
    nova_vyska = akt_vyska * 2;
  }
  else {
    nova_vyska = akt_vyska / 2;
  }
  if (nova_vyska < 100) {
      document.getElementById(id).style.height = "100px";
      alert('min vyska bloku pro text je 100px');
  }
  else {
    document.getElementById(id).style.height = nova_vyska+"px";
  }
}

Zde tedy nastaveno na dvounásobek, respektive polovici aktuálního stavu.

pozitiva

získání vysoké textarey velmi rychle

negativa

velké rozdíly v jednotlivých velikostech; tři kliky by textareu „vytahlo“ na výšku 800px (při 100px startu)

Velké negativum všech těchto řešení (a jim podobných) je to, že textarea je zvětšována až na akci (klik) uživatele, a to jak u nového příspěvku, tak i případné editace dlouhého textu.

Ale fungovalo to.

Ale proč zůstávat u tohoto řešení, když je jiné, lepší a také jednoduché?

jQuery

Již jsem to psal jinde – tohle byl konečně ten zlomový impuls, proč jsem se začal o jQuery zajímat.
Při přesunu Jak číst PDB jsem měl dlouhé texty, které jsem potřeboval formátovat pomocí Texy!. A když jsem popáté otevřel editaci úvodního textu a rozklikával textareu… prostě muselo existovat řešení automatického roztahování textarey.
A taky že jo – a to hned několik (pro jQuery)

Pokud by jste chtěli hledat, hledejte řetězec „autogrow“ nebo přímo „textarea autogrow“. Ve spojení s jQuery by jste pak mohli narazit minimálně na tyto:

• Auto Growing Textareas; mrkněte na demo na stránce autora – nefungoval mi v opeře u dvou textarea na stránce, ač na demu ano
• jQuery growfield; opět zkuste jeho demo – nezkoušeno
• $.elastic – Auto growing textareas a jeho demo – potkáno teď, ale pod operou 9,62 běží
• Auto-Growing Textarea /jaz303/, jako demo můžete vyzkoušet můj formulář pro komentář; tento plugin jsem nasadil zde i na Legii

Pro samotné zprovoznění je nutné mít načtenou jQuery.js, následně načíst tento plugin a pak zavolat buď pomocí jQuery:

$(document).ready (function() {
        $('textarea').autogrow();
});

nebo natvrdo skriptem pod příslušnou textareou:

<script type='text/javascript'>
  $(function() {
    $('textarea').autogrow();
  });
</script>

Toť pro dnešek vše

PS: dnes jsem našel ješte jedno pěkné řešení pomocí JS: Resizeable Textarea — textarea se změnou rozměrů, ale měnit to určitě nebudu…