Value auslesen bei Textarea und onload

[jeffglennfox]

Hallo,

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

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:

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:

<textarea style="min-height:200px;" name="message" id="textarea" maxlength="1500"  class="rc" >

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.

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:

<textarea rows="7" name="message" id="textarea" maxlength="1500" >

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

 

[mikdoe]

Ich benutze und empfehle dafür: Autosize

 

[jeffglennfox]

OK, danke.

das schaue ich mir mal an.

Gruss von Markus

 

[kkapsner]

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:

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.