ugrás a tartalomhoz

Dinamikusan méreteződő textarea scrollbar nélkül

bonobo · 2007. Jún. 8. (P), 23.37
Sziasztok,

A fentit szeretném megvalósítani úgy, hogyha beírnak a szövegmezőbe, akkor ne scrollbar legyen, hanem a textarea nyúljon függőlegesen a szöveg méretéhez ha pedig törölnek belőle, akkor zsugorodjon függőlegesen, ha kell.
Szerintetek megoldható?
Gugliztam eleget esküszöm! :)

Előre is köszi szépen!
‹ IE hack - Opera hack IE6 vs menu ›
 ■
1

Nem igazán

inf · 2007. Jún. 9. (Szo), 00.34
A textareaban csak a beírt szöveg hosszát tudod megkérdezni, azt, hogy milyen magas nem. Innentől javascripttel bukott az egész, más megoldást meg nem nagyon tudok. Mmint egyszerűt. Lehet saját textareat írni, de nem kifizetődő.. Van még iframe, ott ha designmodera állítod, akkor le lehet kérni a bodynak a nagyságát, és úgy mondjuk a megfelelő eseménykezelőkkel lehet változtatni a méretet. Hmm nem is rossz ötlet, majd kipróbálom, ha saját szövegszerkesztőt írok.
2

ScrollHeight?

bonobo · 2007. Jún. 9. (Szo), 11.58
Az okés, hogy a szövegnek nem érem el a magasságát, de van ez a ScrollHeight tulajdonság, amivel esetleg meg lehetne állapítani, hogy mennyi lóg ki és annyival növelni a textarea magasságát?
3

Hát

inf · 2007. Jún. 9. (Szo), 12.02
Hát ha lehet scrollHeightot lekérni textareaból, akkor menni fog, ha nem, akkor meg nem, próbáld ki.
4

IE-ben megy

bonobo · 2007. Jún. 9. (Szo), 12.28
IE-ben működik :), FF-ben ha kitörlök részt, akkor valamiért nem csökken a scrollHeight értéke :(

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<script language="javascript">
	function resizeTA(){
		var ta = document.getElementById( 'ta' );
		ta.style.height = ta.scrollHeight + 'px';
	}
</script>
<textarea style="width:300px; height:50px" id="ta" onkeyup="resizeTA()"></textarea>
</body>
</html>
5

Igen

inf · 2007. Jún. 9. (Szo), 12.57
Egyrészt, másrészt pedig nincs onpaste FFben, tehát ha másolnak szöveget, akkor azt ff nem érzékeli.
Magyarán esélytelen. De azért kipróbáltam én is :D

a kódodhoz annyit hozzátennék, hogy itt felesleges getElementById, egyszerűen resizeTA(this) elég
6

Azért köszi szépen! ;)

bonobo · 2007. Jún. 9. (Szo), 13.33
Nem adom fel! :) Megpróbálkozom majd az iframe-es lehetőséggel is! ;)
8

Izé

inf · 2007. Jún. 9. (Szo), 14.24
gondolom ff úgy gondolja,hogy a scrollHeight minimuma az aktuális magasság. azért mondjuk egyszerűbb scrollbart írni ffben, ez meg a hátránya...
7

FF

attlad · 2007. Jún. 9. (Szo), 13.59
Ez így megy FF-ban, csak teszkód kéne még rajta csiszolni. 3 dolog: az eseményt nem billentyűeseményhez kötöttem, hanem időzített (így onpaste se gond). És mivel magától nem csökken ezért workaround, hogy mindig csökkentem eggyel. Ezért kell a container elem és CSS formázás hogy ne ugráljon a szövegmező alja és a scrollbar. Lehet van egyszerűbb megoldás. Még nem nagyon néztem utána. Viszont nekem is rajta volt/van a todo listán, hogy valami ilyet csináljak saját JS-es szövegszerkesztő cucchoz csak még nincs kész.

<script type="text/javascript">
function fitToText()
{
	var ta = document.getElementById('ta');
	var taContainer = document.getElementById('taContainer');
	var tach = ta.clientHeight;
	var tash = ta.scrollHeight;
	if (tash > tach) {
		ta.style.height = tash + 'px';
		taContainer.style.height = (tash + 3) + 'px';
	} else {
		ta.style.height = (parseInt(ta.style.height) - 1) + 'px';
	}
}

var fitToTextInterval = setInterval(fitToText, 50);
</script>
<div id="taContainer" style="border: 1px solid #333; width: 300px;"><textarea style="border: none; overflow-y: hidden; width:300px; height:50px" id="ta"></textarea></div>
9

Sztem

inf · 2007. Jún. 9. (Szo), 14.55
Imho ha olyat akarsz megcsinálni intervallal, amit elvileg eseménykezelőkkel kéne, az gányolás. Interval inkább arra való, hogy mozgásokat csinálj vele, nem adatellenőrzésre.
11

Időzítés nélkül

attlad · 2007. Jún. 9. (Szo), 15.41
Itt a javított, időzítés nélküli (FF) verzió:

<script type="text/javascript">
function fitToText()
{
    var ta = document.getElementById('ta');
    if (ta.scrollHeight > ta.clientHeight) {
        ta.style.height = (ta.scrollHeight + 10) + 'px';
    } else {
    	ta.style.height = '10px';
    	ta.style.height = (ta.scrollHeight + 10) + 'px';
    }
}
</script>
<textarea style="overflow-y: hidden; width: 300px; height: 50px" oninput="fitToText()" id="ta"></textarea>
12

Jah

inf · 2007. Jún. 9. (Szo), 15.55
jaja ezt néztem én is, elvileg oninput az jó cutra meg ilyesmire, azt írták róla, hogy pastre sajos ez sem működik :-/
13

Működik

attlad · 2007. Jún. 9. (Szo), 16.06
Milyen paste? Nálam működik, Ctrl+V, kontext menü beillesztés, egérgörgő kattintással beillesztéssel is. Nálad nem működik a példa?
14

Örül

inf · 2007. Jún. 9. (Szo), 18.01
de működik, hmm érdekes, én csak olvastam az oninputról, nem próbáltam ki, de most hogy nézem arra is jó :)
Kúl!
én meg összehoztam iere is a megoldást, szóval most így überfaxa, úgy látszik mégis lehet ilyet, csak akarni kell :D

<script type="text/javascript">
function fitToText()
{
 if (this.scrollHeight>this.clientHeight)
 {
  this.style.height=(this.scrollHeight+20)+"px";
 }
 else
 {
  this.style.height="10px";
  this.style.height=(this.scrollHeight+20)+"px";
 }
}

</script>
<textarea id="bid" style="overflow-y: hidden; width: 300px; height: 50px"
 oninput="fitToText.call(this)"
 onpropertychange="if (event.propertyName.toLowerCase()=='value') fitToText.call(this)"></textarea>
na most már csak az kell, hogy levédetjük a technológiát, azt eladjuk drágapénzért, utána meg veszekszünk, hogy kinek mennyi jár :D
15

juhé

Marcell · 2007. Jún. 9. (Szo), 19.31
Sztem pénz nélkül is szuper lenne, ha sokan építenék be, mert akkor végre intelligens űrlapokkal találkozhatnánk a weben! A készítő neve (+presztizs) meg a kóddal együtt terjed...
25

Nem beépíthető

attlad · 2007. Jún. 10. (V), 21.23
szuper lenne, ha sokan építenék be, mert akkor végre intelligens űrlapokkal találkozhatnánk a weben

Vagy használhatatlanokkal. Azt tegyük hozzá, hogy mivel a fentiek csak példák (amiknek a lényege hogy gyorsan, copy-paste tesztelhető legyen ill. a logika megérthető legyen) és nem kész megoldások, ezért remélhetőleg így ebben a formában nem építi be senki, mert a CSS formázás egy részét még át kéne tenni JavaScriptbe a cucc konstruktorába, hogy kikapcsolt JS esetén se váljon használhatatlanná a szövegmező. Ill. az eseménykezelőket is jobb onnan bekötni.
27

A lényeg a lényeg...

Marcell · 2007. Jún. 11. (H), 00.06
...a többit pedig már mindenki megoldja saját maga.
16

Tutorial.hu

Max Logan · 2007. Jún. 9. (Szo), 19.49
Küldd be a tutorial.hu-ra és máris meg van oldava a terjesztés kérdése. Ami meg a pénzt illeti, éljen az OpenSource társadalom ...
17

...

inf · 2007. Jún. 9. (Szo), 20.41
Hát azon a szánalom oldalon regisztrálni se lehet, én legalábbis nem találtam.
18

FAQ

Max Logan · 2007. Jún. 9. (Szo), 22.32
Le van írva a FAQ-ban, hogy miért nem lehet regelni és mi a megoldás ...
19

Szuper!

bonobo · 2007. Jún. 10. (V), 14.43
Akarásnak szép kód a vége :D
Grat inf3rno! ;)
Használhatom? :)
20

:-)

inf · 2007. Jún. 10. (V), 16.30
Azért nem csak egyedül csináltam..
10

Köszi! :)

bonobo · 2007. Jún. 9. (Szo), 15.00
Ezt is megvizslatom! :)
(Szvsz a csudi böngészők miatt eléggé gányolásra vagyunk kárhoztatva néha.:()
21

proformban ez megoldva

Hodicska Gergely · 2007. Jún. 10. (V), 20.11
Gellért előadásában volt erre példa: http://opensource.nexum.hu/proform/public/proform.html


Üdv,
Felhő
22

Nem sokat ér

inf · 2007. Jún. 10. (V), 20.34
A lényeghez köze nincs annak, ránéztem, onkeyupot és onfocust használ, ebben meg az a lényeg, hogy ha mondjuk egérrel tolsz rá cutot, vagy pastet, akkor is módosuljon a méret.
23

amire valaszoltam

Hodicska Gergely · 2007. Jún. 10. (V), 20.52
Nezd meg legyszi, hogy mire valaszoltam: hol van benne az egerrel huzogatas es a copy-paste? ;) Amugy meg nyilvan az otlet lehet az erdekes, az idozitessel meg lehet jatszani.


Udv,
Felho
24

Hát

inf · 2007. Jún. 10. (V), 21.09
Hát én a tökéletességre törekszem, ahhoz meg hozzátartozik a copy-pase is :-)
26

Operában nem jó

halfoto · 2007. Jún. 10. (V), 21.49
Kipróbáltam, örültem, aztán leteszteltem Operában is, és szomorú lettem. Minden egyes karakter bevitelénél egy sorral nagyobb lesz a szövegdoboz :(
28

Sztem

inf · 2007. Jún. 11. (H), 00.17
valszeg scrollHeight-clientHeight értékekkel van a gond, gondolom ha leveszed a +20pxes részt, akkor működik ott is, vmi még nem egészen jó benne. majd kijavítom, most sajnos vizsgákra kell koncentrálnom.
29

megtaláltam és kicsit pofozgattam

razielanarki · 2007. Aug. 16. (Cs), 22.49
ez lett belőle
function resizeTextarea (textarea)
{
    textarea.style.height = '1em';
    textarea.style.height = (textarea.scrollHeight < 100 ? 100 : textarea.scrollHeight) + 'px';
}
én azt vettem észre hogyha hamarabb kérdezzük le a scrollheight-et mint levesszük a height magasságát (pl 1em-re), akkor a scrollheight egyenlő lesz a clientheight-tel, és ez alapján nem tudjuk beállítani az új magasságot.

(sőt nálam alapból 13em volt egy js nélküli textarea, így a scrollheight alapból = clientheight volt (ffben) és nem is húzta össze 100px magasra őket mert így 166px nek látta az üres szöveget is)

nálam működik ff2, ie7, ie6 ban, remélem hasznát veszitek
30

nem lehet script tagezni :o ez de gány

inf · 2007. Aug. 17. (P), 04.03

<$cript>
function fitToText ()  
{
	var minheight=parseInt(this.getAttribute("minheight"),10);
	if (isNaN(minheight))
	{
		minheight=10;//1em
	}
	this.style.height=minheight+"px";  
	this.style.height=this.scrollHeight<minheight?minheight:this.scrollHeight+"px";  
}

</$cript>  
<textarea style="overflow-y: hidden; width: 300px; height: 100px" oninput="fitToText.call(this)" onpropertychange="if (event.propertyName.toLowerCase()=='value') fitToText.call(this)"></textarea>
lassan már verziószámot is adhatunk neki :P
sajnos nem sokat találtam arról, hogy 1em az hány px, szóval inkább nem kísérleteztem vele...
felbntással, meg a body rész nagyságával kellene osztani szorozni, de nincs sok kedvem hozzá, aztán azért lett 10
31

em vs. px

janoszen · 2007. Aug. 17. (P), 09.13
Az EM relatív mértékegység, a beállított betümérethez képest.
32

xyz

inf · 2007. Aug. 17. (P), 11.30
szóval akkor a textarea betűméretét kéne leszedni valahogy pxben
33

Textarea++

Török Gábor · 2007. Aug. 17. (P), 11.59
Bártházi András a tavalyi webconfon számodra érdekes témában tartott előadást Textarea++ címmel.
34

ismerem

inf · 2007. Aug. 17. (P), 12.25
Ja, láttam már azt a PDFet, ez a megoldás annyiben jobb, hogy nem csak onkeyupra vagy onchangere működik, mint az övé, hanem bármilyen adatmódosításra. De azért szép munka. :-)