Resize TextArea on load

Question

I'm having issues trying to resize a text area, I can do it as the user is typing but when they have submit it this gets put into a database and put into a text area below and display as a message on a message board but if the message exceeds the size of the Text Area it's not displayed I was wondering if anyone out there has had this issue and overcome it.

Here is the solution I came up with for the resizing whilst typing,

function resizeTextarea (id) { var a = document.getElementById(id); a.style.height = 'auto'; a.style.height = a.scrollHeight+'px'; } function init() { var a = document.getElementsByTagName('textarea'); for(var i=0,inb=a.length;i<inb;i++) { if(a[i].getAttribute('data-resizable')=='true') { resizeTextarea(a[i].id); } } } addEventListener('DOMContentLoaded', init);

This is called on keyup on the textarea in my other page where ive used it but I have tried to do something like this to resize when it loads but it doesn't work but it does work when a key is pressed or a button is clicked.

onload="resizeTextarea('commentstext');"

I know i could always have it scrollable or put it into a div but divs don't format the text like a textarea if i do a line break in the text and submit it to a div ti wont be there

@MirkoGuarnier at first glance that looks very similar to what I already have how does this deal with data being loaded from a database not typed into it? — Crouch
– Crouch, Commented Feb 17, 2014 at 14:40

Ondřej Kratochvíl · Accepted Answer · 2015-03-01 22:39:34Z

See my modification of prior solution: http://jsfiddle.net/CbqFv/570/

HTML

<textarea cols="42" rows="1"> 1 ...by default, you can write more rows</textarea><br /> <br /> <textarea cols="42" rows="5"> 1 2 3 4 5 ...by default, you can write more rows</textarea><br /> <br /> <textarea cols="42" rows="10"> 1 2 3 4 5 6 7 8 9 10 ...by default, you can write more rows</textarea>

CSS

textarea { border: 1px solid gray; border-radius: 3px; line-height: 1.3em; overflow: hidden; padding: 0.3em 0.3em 0 0.3em; outline: none; background-color: white; resize: none; }

JavaScript

var observe; if (window.attachEvent) { observe = function (element, event, handler) { element.attachEvent('on'+event, handler); }; } else { observe = function (element, event, handler) { element.addEventListener(event, handler, false); }; } function init () { function resize (element) { element.style.height = 'auto'; element.style.height = element.scrollHeight+'px'; } /* 0-timeout to get the already changed text */ function delayedResize (element) { window.setTimeout(function() { resize(element) }, 0); } var textareas = document.getElementsByTagName("textarea"); for (i = 0; i < textareas.length; i++) { var textarea = textareas[i]; observe(textarea, 'change', function() { resize(this) }); observe(textarea, 'cut', function() { delayedResize(this) }); observe(textarea, 'paste', function() { delayedResize(this) }); observe(textarea, 'drop',function() { delayedResize(this) }); observe(textarea, 'keydown', function() { delayedResize(this) }); textarea.focus(); textarea.select(); resize(textarea); } } init();

stilllife · Accepted Answer · 2014-02-17 14:56:05Z

from autosize documentation:

Autosize has no way of knowing when the value of a textarea has been changed through JavaScript. If you do this, trigger the autosize.resize event immediately after to update the height. Example:

$('#example').val('New Text!').trigger('autosize.resize');

So after you update the textarea content, you'll have to call that trigger to autoresize it

Collectives™ on Stack Overflow

Resize TextArea on load

2 Answers 2

HTML

CSS

JavaScript

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

HTML

CSS

JavaScript

Comments

Comments

Linked

Related