Autor | Zpráva | ||
---|---|---|---|
regy Profil |
#1 · Zasláno: 30. 6. 2009, 17:43:07
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 |
#2 · Zasláno: 30. 6. 2009, 17:52:43
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 |
#3 · Zasláno: 30. 6. 2009, 17:54:34 · Upravil/a: Chamurappi
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 |
#4 · Zasláno: 30. 6. 2009, 17:58:45
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 |
#5 · Zasláno: 30. 6. 2009, 18:03:58
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 |
#6 · Zasláno: 30. 6. 2009, 18:07:58
keeehi
přesně tak, a kdyžtak ho můžeš zase odstranit |
||
regy Profil |
#7 · Zasláno: 30. 6. 2009, 18:20:47
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," "); text = text.replace(/\n/g,"<br> "); 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 |
#8 · Zasláno: 30. 6. 2009, 18:25:05
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 |
#9 · Zasláno: 30. 6. 2009, 18:28:15
mě to ve FF nefunguje a mám asiTAKOVOU velikost písma
|
||
regy Profil |
#10 · Zasláno: 30. 6. 2009, 18:43:53
nemohl bys to blíže specifikovat, nebo někam upnout?
|
||
Chamurappi Profil |
#11 · Zasláno: 30. 6. 2009, 19:25:09
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 |
#12 · Zasláno: 30. 6. 2009, 19:44:16
Toto řešení se nedá moc použít, protože pokud je stránka se scrollerem, tak skáče jak nadmutá koza :-).
|
||
Chamurappi Profil |
#13 · Zasláno: 30. 6. 2009, 19:49:12
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 |
#14 · Zasláno: 30. 6. 2009, 19:53:16 · Upravil/a: regy
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 |
#15 · Zasláno: 30. 6. 2009, 19:59:38
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 |
#16 · Zasláno: 30. 6. 2009, 21:00:52 · Upravil/a: regy
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 ;-)...
|
||
Časová prodleva: 15 let
|
0