Textarea durch EventHandler onclick vergrößern

Textarea mit VergrößerungsfunktionEinige Websites nutzen Scripte, welche das Vergrößern eines Textfeldes, wie textarea in HTML, durch Klick auf entsprechende Zeichen ermöglichen, um den Inhalt dieser leichter bearbeiten zu können. Häufig gesehen in Foren, wie unter html.de, oder in TinyMCE, einem umfangreichen JavaScript-WYSIWYG-Editor.

Funktionen zum Vergrößern bzw. Verkleinern von Textareas lassen sich schnell mit JavaScript implementieren. Es wird eine textarea, zwei Links und ein kurzer JavaScript-Abschnitt benötigt.

Verkleinern
Vergrößern

Zu allererst wird das Textfeld, sowie die beiden Links für die Kontrolle der Größe angelegt. Dies könnte folgendermaßen aussehen:

<form action="" method="post">
<a href="javascript:vergroessern()">Vergrößern</a>

<a href="javascript:verkleinern()">Verkleinern</a>

<textarea name="bezeichner" rows="4" cols="30"> Textfeld-Inhalt</textarea>

</form>

Hier spielen vorallem die href-Attribute der a-Tags eine Rolle, denn sie rufen bei einem Klick auf den Link die entsprechenden Funktionen zur Kontrolle der Größe auf.

Folgender HTML-/JavaScript-Code wird zwischen die head-Tags eines bestehenden HTML-Dokuments eingefügt. Er enthält die Funktionen, welche von den Links aufgerufen werden.

<script type="text/javascript">// <![CDATA[
	var veraenderung = 3; // Textfeld veraendert sich stets um 3 Zeilen
	var element = "textfeld"; // ID des Textfelds
	function vergroessern(){
                if(document.getElementById(element).rows < 30){
		        document.getElementById(element).rows = document.getElementById(element).rows + veraenderung;
                }
	}
	function verkleinern(){
                if(document.getElementById(element).rows > 2){
		        document.getElementById(element).rows = document.getElementById(element).rows - veraenderung;
                }
	}
// ]]></script>

Die Variable “element” muss die ID enthalten, welche an das zu steuernde Textfeld übergeben wurde, in diesem Fall “textfeld”.

Das war es.

Übrigends: Dies funkioniert nur mit dem HTML-Element “textarea” und nicht mir “input”, da das Input-Tag nur einzeiligen Text enthalten kann.

Dieser Artikel wurde vertaggt mit , , , , , .
Kategorien: Funktionen, JavaScript, Webdesign

Hat Ihnen dieser Artikel gefallen? - Dann abonnieren Sie vlblog um über neue Themen rund ums Web informiert zu werden.

2 Kommentare zu “Textarea durch EventHandler onclick vergrößern”

  1. KunzlBär sagt:

    Hier mal ein vernünftiges Script!

    function change_size(textarea){
    if (textarea.rows > 24)
    { textarea.rows = 2; }
    else if (textarea.rows < 3)
    { textarea.rows = 25;}
    }

    Klick in die Textarea bewirkt die Vergrößerung bzw. Verkleinerung um den entsprechenden Wert…

    • vitus37 sagt:

      Vielen Dank für deine Antwort.

      Dein Script kann natürlich auch für die Größenveränderung verwendet werden, allerdings besteht hier nicht die Möglichkeit die Größe individuell an den Viewport anzupassen.
      Mein Ziel war es u.a. zu erreichen, dass jeder das Textfeld so vergrößern kann, dass es genau richtig in seinen Browser passt.

      Gut finde ich allerdings deine Kontrollstrukturen. Die würde ich gerne übernehmen, sofern es dich nicht stört.

      Gruß

Hinterlasse eine Antwort