Autor Zpráva
regy
Profil
Zdravím,
nikde jsem nenašel funkci, která by spolehlivě měnila velikost textarey podle obsahu. Napadlo mě jedno řešení, které se mi podařilo vytvořit a je v podstatě funkční v prohlížečích FF, Opera, Chrome, Safari, IE 7. Chci se zeptat, jestli ho zde chcete uveřejnit, protože tady rozšíří rychle do světa. Sice si to potom možná někdo přivlastní, ale tak aspoň se bude vědět, že to tak jde. Pokud už to někdo vymyslel a já sem to akorát nenašel, tak se omlouvám a jsem vůl :-).
inclu123
Profil
a jaký je?
BTW: tohle se dává do jinýho tématu, v tomhle tématu se řeší problémy s javascriptem
Chamurappi
Profil
Reaguji na regyho:
Já bych to napsal nějak takhle:
var ta = document.jménoFormuláře.jménoTextovéhoPole;
ta.onkeyup = ta.onkeydown = ta.onkeypress = ta.onchange = function()
{
  this.style.height = 0;   // donutím <textareu>, aby si spočítala správně scrollHeight
  this.style.height = this.scrollHeight + 4 + "px";   // čtyřka je součet okrajů + paddingu
};


Reaguji na inclu123:
v tomhle tématu se řeší problémy s javascriptem
Vždyť je řeč o JS, ne? Do jaké kategorie bys toto vlákno chtěl dát?
inclu123
Profil
no já bych to dal do nezařaditelných dotazů, je sice řeč o js, ale né o skriptu jako takovém, je řeč o jeho uveřejnění, můj názor.
keeehi
Profil
Chamurappi, inclu123:
Vždyť je to jedno ne?

regy:
Tak ho sem nakopíruj. Když už jsi založil toto téma, ta ať tu alsepoň je.
inclu123
Profil
keeehi
přesně tak, a kdyžtak ho můžeš zase odstranit
regy
Profil
Takže příklad

a

kód:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">;
  <title></title>
  <style type="text/css">
  
  textarea {
  width: 300px;
  border: 1px solid black;
  padding: 0px 0px 0px 0px;
  overflow: hidden;
  font: 15px Arial;
  position: relative;
  }
  
  div {
  font: 15px Arial;
  width: 300px;
  padding: 1px 0px 0px 1px;
  position: absolute;
  color: transparent;
  }
  
  textarea {
  }

  </style>
  
  <script type="text/javascript" language="JavaScript">
  
  function getsize() {
  var text = document.formular.textarea.value;
  text = text.replace(/  /g,"&nbsp;&nbsp;");
  text = text.replace(/\n/g,"<br>&nbsp;");
  document.getElementById("counter").innerHTML = text + "<br><br>";
  if(text == "" || document.getElementById("counter").offsetHeight < 40) {
    document.getElementById("textarea").style.height = "50px";
  } else
  document.getElementById("textarea").style.height = document.getElementById("counter").offsetHeight + "px";
  }
  
  function getsize2() {
  setTimeout("getsize()", 10);
  setTimeout("getsize()", 100);
  }
  
  </script>
  </head>
  <body onload="getsize();">
<div id="counter">
</div>
<form name="formular">
<textarea id="textarea" name="textarea" onkeypress="getsize(); getsize2();" rows="2">
</textarea>
</form>
  </body>
</html>



Nefunguje to s každou velikostí písma, jak jsem před chvílí zjistil, protože firefox to jinak vykresluje v textarea a jinak v divu (například 14px). To musíte vyzkoušet, co to bere. Ale 15px funuguje a je to skoro stejně velký.
regy
Profil
jo a ještě to má tu nevýodu, že když všechno najednou smažete, tak kromě ff se textarea zmenší a tehdy, když něco napíšete. Ale tak to není tak strašně. Kdybyste to někdo nepochopil, tak to funguje asi takto:

Při zmáčknutí klávesy se text z textarey zkopíruje do divu, který má stejné vlastnosti jako textarea (šířka, písmo). Při tom sem více mezer za sebou nahradí za nobreak mezery a \n na <br>. Ten div je zkrytý za textareou, aby nebyl vidět. No a potom se veme výška divu a ta se přiřadí textaree. To se provede ještě jendou ze spožděním, aby se do toho započítal i poslední znak.
inclu123
Profil
mě to ve FF nefunguje a mám asiTAKOVOU velikost písma
regy
Profil
nemohl bys to blíže specifikovat, nebo někam upnout?
Chamurappi
Profil
Reaguji na regyho:
Není jednodušší zjistit si potřebnou výšku ze scrollHeight? Skript v příspěvku [#3] nefunguje v některém ze zmíněných prohlížečů? Vyrobil jsem teď k němu živou ukázku.


Reaguji na inclu123:
Všechno, co se týká JavaScriptu, patří sem, a kdyby to bylo dáno jinam, bylo by to brzy přesunuto.
regy
Profil
Toto řešení se nedá moc použít, protože pokud je stránka se scrollerem, tak skáče jak nadmutá koza :-).
Chamurappi
Profil
Reaguji na regyho:
Vskutku. V tom případě je zapotřebí provádět měření na něčem jiném, ideálně na skryté stoprocentní kopii té <textarea>. Pořád to bude lepší než pracně upravovaný <div>, ne?
regy
Profil
myslíš skrytý jako dispaly:none? někde jsem četl, že pak je výška javascritpem detekována jako 0. A když to bude jen skryté za něčím, nebo opacity: 0, tak to stejně odskočí na začátek této textarey ne?
Uznávám, že chvíli trvá, než se můj způsob vyladí, ale potom už to funguje.
Chamurappi
Profil
Reaguji na regyho:
myslíš skrytý jako dispaly:none?
Myslím skrytý jako zašoupnutý pár tisíc pixelů doleva od monitoru (třeba do lednice nebo do skříně).

tak to stejně odskočí na začátek této textarey ne?
V té <textaree> nebude kurzor, takže ne.
regy
Profil
aháá... Sice my takhle vypadne úplně ven z okna, ale tak bydlíme v přízemí, tak by to nemělo vadit. Díky. Teď už to mám udělané pomocí mého řešení. Příště ale zkusím to tvoje. vypadá to líp ;-)...

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: