Ergebnis 1 bis 4 von 4
  1. #1
    jeffglennfox ist offline Eroberer
    registriert
    08-08-2008
    Beiträge
    54

    Value auslesen bei Textarea und onload

    Hallo,

    ich möchte die folgende Funktion benutzen um die Höhe von Textareas automatisch anzupassen:

    Code:
    var textarea = document.querySelector('textarea');
    
    textarea.addEventListener('keydown', autosize);
                 
    function autosize(){
      var el= this; 
      setTimeout(function(){
        el.style.cssText = 'height:auto;';
        // for box-sizing other than "content-box" use:
        // el.style.cssText = '-moz-box-sizing:content-box';
        el.style.cssText = 'height:' + el.scrollHeight + 'px';
      },0);
    }

    Das funktioniert beim Event "keydown" auch einwandfrei. Ich möchte die Funtion aber ebenfalls mittels 'onload' auf Texareas anwenden, die schon einen Inhalt haben. Kann mir jemand einen Tip für einen Lösungsansatz geben, wie ich in diesem Fall auf die Inhalte der Textareas zugreife.

    Gruss von Markus

    - - - Aktualisiert - - -

    Ich habe jetzt noch ein wenig rumprobiert und es jetzt so gelöst:

    Code:
    var textarea = document.querySelector('textarea');
    
    
    window.document.addEventListener("load", autosize('load'));
    
    textarea.addEventListener('keydown', autosize);
    
                 
    function autosize(value){
      if (value == 'load' ) {var el= textarea;} else {el= this;} 
      setTimeout(function(){
        el.style.cssText = 'height:auto;';
        // for box-sizing other than "content-box" use:
        // el.style.cssText = '-moz-box-sizing:content-box';
        el.style.cssText = 'height:' + el.scrollHeight + 'px';
      },0);
    }
    Gruss von Markus

    - - - Aktualisiert - - -

    Jetzt hat sich doch noch eine Folgefrage ergeben. Ich möchte erreichen, dass die in der Textarea festgelegte Mindesthöhe nicht unterschritten wird, bekomme dass aber nicht gelöst, da diese bei Ausführen der Funktion offenbar überschrieben wird. Hier nochmal der aktuelle Code:

    HTML-Code:
    <textarea style="min-height:200px;" name="message" id="textarea" maxlength="1500"  class="rc" >
    Code:
    window.document.addEventListener("load", autosize('load'));
    
    window.addEventListener("resize", function(){autosize('load')}, false);
    
    var textarea = document.querySelector('textarea');
    
    textarea.addEventListener("keydown", autosize);
    
    
    function autosize(value){
    	
    if (value == 'load' ) {var el= textarea;} else {el= this;} 
    
    setTimeout(function(){
    
    el.style.cssText = 'height:auto;';
    
    el.style.cssText = 'height:' + el.scrollHeight + 'px';
    
    
    },0);
    
    }
    Ich bin für Tips zur Lösung dankbar.

    Gruss von Markus

    - - - Aktualisiert - - -

    mit diesem Versuch über das Auslesen der offsetHeight funktioniert es leider auch noch nicht perfekt (weil wenn man Zeilen löscht, sich die Textarea nicht wieder auf den min-height-Wert verkürzt) . Problem ist nach wie vor, dass nach dem ersten Ausführen der Funktion die min-height gelöscht wird, warum auch immer.

    Code:
    window.document.addEventListener("load", autosize('load'));
    
    window.addEventListener("resize", function(){autosize('load')}, false);
    
    var textarea = document.querySelector('textarea');
    
    textarea.addEventListener("keydown", autosize);
    
    
    function autosize(value){
    	
    if (value == 'load' ) {var el= textarea;} else {el= this;} 
    
    setTimeout(function(){
    
    var minHeight = el.offsetHeight+2;  /* +2 insgesamt für Rahmen oben und unten  */
    
    el.style.cssText = 'height:auto;';
    
    el.style.cssText = 'min-height:'+minHeight+'px;';
    
    el.style.cssText = 'height:' + el.scrollHeight + 'px';
    
    },0);
    
    }
    Gruss von Markus

    - - - Aktualisiert - - -

    Problem vollständig gelöst und funktioniert perfekt wie gewünscht:

    HTML-Code:
    <textarea rows="7" name="message" id="textarea" maxlength="1500" >
    Code:
    window.document.addEventListener("load", autosize('load'));
    
    window.addEventListener("resize", function(){autosize('load')}, false);
    
    var textarea = document.querySelector('textarea');
    
    textarea.addEventListener("keydown", autosize);
    
    function autosize(value){
    	
    if (value == 'load' ) {var el= textarea;} else {el= this;} 
    
    setTimeout(function(){
    
    var rows = el.rows;
    
    el.style.cssText = 'height:auto;';
    
    el.rows = rows;
    
    el.style.cssText = 'height:' + el.scrollHeight + 'px';
    
    },0);
    
    }

    Thema kann geschlossen werden.


    Gruss von Markus
    Geändert von jeffglennfox (25-07-2019 um 01:40 Uhr)

  2. #2
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.718

    AW: Value auslesen bei Textarea und onload

    Ich benutze und empfehle dafür: Autosize
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  3. #3
    jeffglennfox ist offline Eroberer
    registriert
    08-08-2008
    Beiträge
    54

    AW: Value auslesen bei Textarea und onload

    OK, danke.

    das schaue ich mir mal an.

    Gruss von Markus

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.695

    AW: Value auslesen bei Textarea und onload

    Ein paar Bemerkungen zu deinem Code:

    1. Ich würde ja nicht mit cssText auf Elementen arbeiten. In deinem Fall kannst du über el.style.height = "..."; arbeiten. Damit hast du nicht die Gefahr, dass du aus versehen eine CSS-Eigenschaft überschreibst, die du wo anders gesetzt hast.
    2. Auch globale Variablen würde ich möglichst vermeiden. textarea ist eine und du verbaust dir damit die Möglichkeit, den Code für mehr als eine Textarea zu aktivieren.
    3. Ich bin mir ziemlich sicher, dass du mit deinem querySelector etwas anderes meinst, als du bekommst. Ich denke mal, dass du auf die ID gehen wolltest (du solltest dann document.getElementById() verwenden) und nicht auf die erste <textarea>, die in deinem DOM vorkommt.
    4. Mir ist nicht ganz klar, was du mit dem .rows Zeugs bewirken willst. Das ist keine dynamische Eigenschaft.
    5. Ich würde das so verpacken, dass du es immer wieder verwenden kannst:
    Code:
    function initAutoSize(textarea){
    	window.addEventListener("load", function(){
    		autoSize(textarea);
    	});
    	window.addEventListener("resize", function(){
    		autoSize(textarea);
    	});
    	textarea.addEventListener("keydown", function(){
    		autoSize(textarea);
    	});
    }
    
    function autoSize(textarea){
    	setTimeout(function(){
    		textarea.style.height = "auto";
    		textarea.style.height = textarea.scrollHeight + "px";
    	}, 0);
    }
    
    initAutoSize(document.getElementById("textarea"));
    - ungetestet.

Ähnliche Themen

  1. Textarea per value auslesen nur 1.Zeile
    Von fritzil im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 17-04-2015, 19:31
  2. wert auslesen und textarea erstellen
    Von wwm2014 im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 28-11-2011, 16:40
  3. function textdatei auslesen und in textarea feld ausgeben
    Von Schneekugel im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 26-12-2010, 21:48
  4. Problem Textarea auslesen
    Von huma6 im Forum JavaScript
    Antworten: 9
    Letzter Beitrag: 16-12-2006, 00:08
  5. markierten text aus einer textarea auslesen
    Von drek im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 15-05-2003, 13:52

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •