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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s

Вула Чăвашла

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

Discovering SharePoint

And going crazy doing it

Bram de Jager - Coder, Speaker, Author

Office 365, SharePoint and Azure

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

Aryan Nava

| Blockchain | Serverless Architecture | Microservices Architecture | DevOps | AWS Lambda | Teraform |

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

blksthl

Mostly what I know about SharePoint - CommunicoCuspis

%d bloggers like this: