[Textarea] Scrollbar verhindern + Nur 1 Startzeile
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ahnung
ansicht
artikel
beispiel
benutzer
chance
code
experte
gerade teile
glauben
http
inhalt
markup
pixel
programmiersprache
sprache
teil
url
zeichen
zeile
-
Hallo,
ich habs bereits geschafft mit
den Wert beim Daraufklicken und beim verlassen der Textarea zu verändern.<textarea name="message" rows="0" cols="65" onfocus="if(this.value=='Was machst du gerade? Teile es mit!'){this.value='';}" onblur="if(this.value==''){this.value='Was machst du gerade? Teile es mit!';}">Was machst du gerade? Teile es mit!</textarea>
Nun habe ich bei Facebook (Ja, ich bin auch auf Facebook
) entdeckt, dass die Anfangszeile nur 1 Zeile wie bei einem Input-Feld ist, und beim daraufklicken die Zeilen auf 3 oder 2 gesetzt werden.
Außerdem verändert sich die Textarea. Anstatt einer Scrollbar bei 4 Zeilen wird die Textarea einfach größer.
Wie geht das?? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Keine Ahnung, ob es das ist, was du willst, aber ich habe da mal was gebastelt.
<!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=utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/standard.css"> <script type="text/javascript"> <!-- var valHeight = 1; function eKeyDown(event, element){ if(event.keyCode==13){ valHeight++; element.style.height = valHeight * 15 + "px"; } } //--> </script> </head> <body> <textarea name="message" rows="0" cols="65" style="font-size:12px; height:14px;" onfocus="if(this.value=='Was machst du gerade? Teile es mit!'){this.value='';}" onblur="if(this.value==''){this.value='Was machst du gerade? Teile es mit!';}" onkeydown="eKeyDown(event, this);">Was machst du gerade? Teile es mit!</textarea> </body> </html> -
ansonstig noch => http://aktuell.de.selfhtml.org/artikel/javascript/variable-textarea/#code
Beispiel-Ansicht => http://aktuell.de.selfhtml.org/artikel/javascript/variable-textarea/beispiel.htm
es gibt hier einiges zu beachten, wie z.B.:
... Außerdem muss dem Textfeld eine feste Zeichenanzahl (cols-Attribut, ebenso auch rows), eine dicktengleiche (nicht-proportionale) Schriftart (z.B. Courier) und eine feste Schriftgröße zugewiesen werden, da das Script, wie sich auch in den weiteren Kapiteln zeigen wird, immer eine feste Zeichenanzahl pro Zeile braucht. Bei Schriftarten wie Arial wäre dies unmöglich, da jedes Zeichen eine andere Breite hat und somit in jede Zeile, je nach Inhalt, unterschiedlich viele Zeichen passen - falls diese Voraussetzung nicht erfüllt werden, würde das hier dokumentierte Script nicht funktionieren.
u.s.w. ... also am besten den Text der gesamten Seite http://aktuell.de.selfhtml.org/artikel/javascript/variable-textarea/ gut durchlesen ;)
Beitrag zuletzt geändert: 20.4.2010 11:02:44 von abakus -
nerdinator schrieb:
Keine Ahnung, ob es das ist, was du willst, aber ich habe da mal was gebastelt.<!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=utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/standard.css"> <script type="text/javascript"> <!-- var valHeight = 1; function eKeyDown(event, element){ if(event.keyCode==13){ valHeight++; element.style.height = valHeight * 15 + "px"; } } //--> </script> </head> <body> <textarea name="message" rows="0" cols="65" style="font-size:12px; height:14px;" onfocus="if(this.value=='Was machst du gerade? Teile es mit!'){this.value='';}" onblur="if(this.value==''){this.value='Was machst du gerade? Teile es mit!';}" onkeydown="eKeyDown(event, this);">Was machst du gerade? Teile es mit!</textarea> </body> </html>
Wow ich bin begeistert!
Danke dir von ganzem Herzen, 100% genau das was ich gesucht habe! Und es funktioniert!
abakus schrieb: ansonstig noch => http://aktuell.de.selfhtml.org/artikel/javascript/variable-textarea/#code
Beispiel-Ansicht => http://aktuell.de.selfhtml.org/artikel/javascript/variable-textarea/beispiel.htm
Das funktioniert auch, aber die textarea fängt mit 2 Zeilen an, trotzdem dank für die Mühe, ich selbst hab nichts gefunden :D
kontogratis schrieb: geht sowas nicht auch mit CSS ?
zumindest der Teil: die <textarea> ohne Scrollbar automatisch vergrößern
irgendwie ... bei overflow unten eine Zeile / weitere 26 Pixel anfügen (Höhe der textarea)
oder keine Chance mit CSS ?
Bin zwar keine JS-Experte, aber ich glaube nicht.
Javascript ist eine Clientseitige-Sprache, damit kann es für jeden anders dargestellt werden. Mit CSS ist es für alle Benutzer gleich, weil es eine Serverseitige Sprache ist, die nicht auf deinen PC, sondern auf den HTML-Code zugreift.
Beitrag zuletzt geändert: 20.4.2010 16:41:17 von limabone -
Bin zwar keine JS-Experte, aber ich glaube nicht.
Javascript ist eine Clientseitige-Sprache, damit kann es für jeden anders dargestellt werden. Mit CSS ist es für alle Benutzer gleich, weil es eine Serverseitige Sprache ist, die nicht auf deinen PC, sondern auf den HTML-Code zugreift.
Naja, ganz so ist es nicht richtig. JavaScript (JS) ist eine Clientseitige Programmiersprache. CSS (=Cascading Style Sheets) und HTML(Hypertext Markup Language) sind keine Programmiersprachen, sondern geben nur das Aussehen an. (M = Markup).
Eine Serverseitige Programmiersprache ist z.B. PHP -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
