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

Sdílet

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 .(treba v CSS3)\" nebo je to už \"z principu nemožné .(nezkoumal jsem logiku)\".

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:
   * maximlnvelikost bylo mono nastavit jednm klikem
   * pi častjm psanpomoctohoto řeenjste se nauili odhadovat tu sprvnou velikost pro vai aktulnmylenku
negativa:
   * maximlnvelikost nemusela stait

2/ nastavenzvtenvky o X px
===

Velmi podobnJS funkce mho prvnho řeenrozdl byl v tom, že jsem ml jen 2 tlatka - Zvtit a Zmenit:
<!-- 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:
   * maximlnvka neexistuje
negativa:
   * pi nastavovnvelkvky se uivatel mohl uklikat

3/ nastavenvky nsobenm či dlenm
===

Reenopt odvozenod minulho, se snahou odstranit vyjmenovannegativum - zstavajdvtlatka:
<!-- 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 dvounsobek, respektive polovici aktulnho stavu.

pozitiva:
   * zsknvysoktextarey velmi rychle
negativa:
   * velkrozdly v jednotlivch velikostech; ti kliky by textareu \"vytahlo\" na vku 800px (pi 100px startu)

**Velknegativum vech tchto řeena jim podobnch) je to, že textarea je zvtovna ana akci (klik) uivatele, a to jak u novho pspvku, tak i ppadneditace dlouhho textu.**

Ale fungovalo to.

Ale prozstvat u tohoto řeenkdyje jinlepa takjednoduch

jQuery
***

Jijsem to psal \"jinde\":http://blog.3tecky.cz/9-js-vs-jquery-uvod - tohle byl konečně ten zlomový impuls, proč jsem se začal o jQuery zajímat.
 Pi pesunu \"Jak číst PDB\":http://pdb.3tecky.cz jsem měl dlouhé texty, které jsem potřeboval formátovat pomocí \"Texy!\":http://texy.info. 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 nkolik (pro jQuery)

Pokud by jste chtli hledat, hledejte řetzec \"autogrow\" nebo pmo \"textarea autogrow\". Ve spojens jQuery by jste pak mohli narazit minimlnna tyto:

* \"Auto Growing Textareas\":http://plugins.jquery.com/project/autogrow; mrkněte na \"demo\":http://www.aclevercookie.com/demos/autogrow_textarea.html na stránce autora - nefungoval mi v opeře u dvou textarea na stránce, ač na demu ano
* \"jQuery growfield\":http://plugins.jquery.com/project/Growfield; opět zkuste jeho \"demo\":http://www.stuffedguys.com/jquery/growfield/index.html - nezkoušeno
* \"$.elastic - Auto growing textareas\":http://plugins.jquery.com/project/elastic a jeho \"demo\":http://sandbox.unwrongest.com/jquery.elastic/ - potkáno teď, ale pod operou 9,62 běží
* \"Auto-Growing Textarea /jaz303/\":http://github.com/jaz303/jquery-grab-bag/tree/master/javascripts/jquery.autogrow-textarea.js, jako demo můžete vyzkoušet můj formulář pro komentář; tento plugin jsem nasadil zde i na Legii

Pro samotnzprovoznnje nutnmt natenou jQuery.js, nslednnast tento plugin a pak zavolat bupomocjQuery:
$(document).ready (function() {
        $(\'textarea\').autogrow();
});
\\---

nebo natvrdo skriptem pod pslunou 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ů\":http://priklady.str4wberry.cz/resizeable-texarea, ale měnit to určitě nebudu...
tagy:
Publikováno: 28.11.2008 00:45
Knedle

Související články

blog comments powered by Disqus