Selbst erweiterbare Texteingabefelder?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ahnung
code
dank
eingabefeld
erdenklichen wege
funktionieren
http
leute
neusten stand
problem
quelle
server
test
textfeld
theoretisch entfernen
update
url
-
Hey Leute,
Habe das Problem, dass ich ein großes Textfeld (<textarea>) habe und wenn ein Zeilenumbruch kommt,
der das Eingabefeld überschreiten würde, wir nur ein Scrollbalken geaddet.
Ich weis schon wie ich den Scrollbalken wegbekomme(mit overflow) aber ich will das sich die größe des Eingabefeldes ändert(rows + 1)
Das Problem bin ich mit PHP auf alle erdenklichen wege durchgegangen, aber nichts hat geholfen.
Ich denke man kann es mit JS hinbekommen hab nur leider keine Ahnung wie.
Danke schonmal im vorraus. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
<textarea id="q" rows="4" cols="80"></textarea> <script type="text/javascript"> function stretchy(element) { var value= element.value; function update() { var h= element.scrollHeight; if (h > element.offsetHeight || h < element.offsetHeight-48) element.style.height= (h+24)+'px'; } element.onkeyup= update; setInterval(update, 1000); update(); } stretchy(document.getElementById('q')); </script>
Quelle: http://stackoverflow.com/a/2208802
Der Code ist nicht mehr auf dem neusten Stand, besser gesagt, die Codestruktur ist heute einfach anders, aber funktionieren tut er alle Fälle. Den Interval und update() könntest du theoretisch entfernen.
Mit PHP kann das auch nicht funktionieren, da hast du Recht.
EDIT: Ich war mit der anderen Variante nicht zufrieden, das ist meine:
<html> <head> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script> $(document).ready(function(){ $('#t').keypress(function(){ z = $('#t').val().split('\n').length; r = $('#t').attr('rows'); if($('#t').attr('rows')-1 < z){ r++; $('#t').attr('rows', r); } }); }); </script> </head> <body> <textarea id="t" rows="10"></textarea> </body> </html>
EDIT2: Meine selbstgeschriebene Variante berücksicht keine wrapped Lines. Das heisst, nur Zeilenumbrüche, die man selbst mit Enter gemacht hat. Deshalb hier ganz einfach mit einem jQuery Plugin:
<html> <head> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://raw.githubusercontent.com/jackmoore/autosize/master/jquery.autosize.min.js"></script> <script type="text/javascript" > $(document).ready(function(){ $('#t').autosize(); }); </script> <style> </style> </head> <body> <textarea id="t" rows="10"></textarea> </body> </html>
Ich empfehle das zweite verlinkte Script zu downloaden und auf dem eigenen Server zu hosten. Livedemo
Beitrag zuletzt geändert: 7.6.2014 1:09:21 von c143 -
@c143
Genau was ich gesucht habe vielen, vielen Dank :) -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage