CHUVASH.eu

CHunky Universe of Vigourous Astonishing SHarepoint :)

The cleanest auto resize for a textarea

The cleanest way to auto-resize a textarea while typing (like wall post on Facebook) is George Papadakis solution. It uses only standard javascript and provides eventlisteners for IE (attachEvent) and other browsers (addEventListener):

window.onload = function() {
	var t = document.getElementsByTagName('textarea')[0];
	var offset= !window.opera ? (t.offsetHeight - t.clientHeight) : (t.offsetHeight + parseInt(window.getComputedStyle(t, null).getPropertyValue('border-top-width'))) ;

	var resize 	= function(t) {
		t.style.height = 'auto';
		t.style.height = (t.scrollHeight  + offset ) + 'px';	
	}

	t.addEventListener && t.addEventListener('input', function(event) {
		resize(t);
	});

	t['attachEvent']  && t.attachEvent('onkeyup', function() {
		resize(t);
	});
}

Other solutions are <a href="https://github.com/padolsey/jQuery.fn.autoResize/blob/master/jquery.autoresize.js, jQuery.autogrow, elastic

Advertisements

16 responses to “The cleanest auto resize for a textarea

  1. Martin Sereday 2013-01-14 at 00:56

    Excellent sollution. But to use it if there are more textareas on one page?

    • Anatoly Mironov 2013-01-14 at 11:09

      Thanks Martin for your response! Of course, you can use this code even if there are many texteareas. You must use an appropriate selector. The code I showed was for the demonstration only.

    • denis 2013-10-17 at 11:01

      you type additional function:
      var txtAreaNumber = 0;
      function getID(thisID) {
      txtAreaNumber = thisID;
      return txtAreaNumber;
      }

      and modify:

      var t = document.getElementsByTagName(‘textarea’)[txtAreaNumber];

      html:

      my function isnt on win.onload but is on click!

      yo good bye

      • Anatoly Mironov 2013-10-17 at 11:34

        Thanks for sharing!

      • EdiSainer 2014-10-29 at 22:02

        I think this website filtering your html code. can you please email me your complete code or create a fiddle and share it here?

  2. svasti 2013-02-09 at 23:24

    Not bad, but what about autoresizing for given data, i.e. a script reads different settings from a file and puts it in textareas, so that the user can edit these data.
    The above script autoresizes only when typing…

    • Anatoly Mironov 2013-02-09 at 23:51

      Thanks svasti! It is a good idea to make it to autoresize for given data. Unfortunately I don’t have time to experiment with it right now. I would appreciate if you leave a message when you find a solution for that.

  3. Serma Arunachalam 2013-06-19 at 06:04

    Excellent solution thank u

  4. Stefan Froelich 2013-10-22 at 14:03

    This actually works. Getting rid of JQuery and needed an non jquery solution. Thanks for this.

  5. Christofer De David 2014-03-20 at 00:50

    Excellent. Worked for me at 20-Mar-2014 in latest FireFox. Thank you.
    So nice and clean. : )

  6. Anatoly Mironov 2014-03-20 at 10:17

    Thanks for the feedback. Glad to hear that it worked for you.

  7. Ashish Srivastava 2014-05-30 at 08:15

    Excellent.:)
    Thanks

  8. Diogo 2014-06-17 at 14:45

    Nice code!

    Just “converted” it to jQuery, since I’m already using it in my project. Here is my result:

    $(function() {
    var t = $(“#message”);
    t.bind(‘input’, function() {
    t.css(“height”, ‘auto’);
    t.css(“height”, t[0].scrollHeight + ‘px’);
    });
    });

    I don’t know if it will work on every browser, as I just tested it on latest version of Chrome, Firefox and Opera, all on Linux.

  9. Diogo 2014-06-17 at 14:48

    Forgot to share a jsfiddle link:
    http://jsfiddle.net/LT7vW/

  10. Ignacio 2015-09-07 at 16:40

    Thank you it works perfectly! 😀

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Вула Чăвашла

VulaCV - Чăвашла вулаттаракан сайт

Discovering SharePoint

And going crazy doing it

Bram de Jager talking Office 365, SharePoint and Azure

My view and thoughts on Productivity and more.

My programming life

and everything in between

SharePoint Development Lab by @avishnyakov

It is a good place to share some SharePoint stories and development practices.

SharePoint Dragons

Nikander & Margriet on SharePoint

Paul J. Swider - RealActivity

RealActivity is a specialized healthcare services and solution advisory firm.

Mai Omar Desouki - Avid SharePointer

Egyptian & Vodafoner - Senior SharePoint Consultant

Cameron Dwyer | Office 365, SharePoint, Outlook, OnePlace Solutions

Office 365, SharePoint, OnePlace Solutions & Life's Other Little Wonders

paul.tavares

Me and My doings!

Share SharePoint Points!!

By Mohit Vashishtha

Jimmy Janlén "Den Scrummande Konsulten"

Erfarenheter, synpunkter och raljerande om Scrum från Jimmy Janlén

SPJoel

SharePoint for everyone

SharePointRyan

Ryan Dennis is a SharePoint Solution Architect with a passion for SharePoint and PowerShell

SharePoint 2020

The Vision for a Future of Clarity

Aharoni in Unicode

Treacle tarts for great justice

... And All That JS

JavaScript, Web Apps and SharePoint

%d bloggers like this: