Skip to content

Instantly share code, notes, and snippets.

@navaru
Last active February 7, 2019 16:46
Show Gist options
  • Star 12 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save navaru/5779160 to your computer and use it in GitHub Desktop.
Save navaru/5779160 to your computer and use it in GitHub Desktop.
Textarea auto-resize vanilla javascript (no jQuery plugin), for modern browsers
;(function () {
function domReady (f) { /in/.test(document.readyState) ? setTimeout(domReady,16,f) : f() }
function resize (event) {
event.target.style.height = 'auto';
event.target.style.height = event.target.scrollHeight+'px';
}
/* 0-timeout to get the already changed text */
function delayedResize (event) {
window.setTimeout(resize, 0, event);
}
domReady(function () {
var textareas = document.querySelectorAll('textarea[auto-resize]')
for (var i = 0, l = textareas.length; i < l; ++i) {
var el = textareas.item(i)
el.addEventListener('change', resize, false);
el.addEventListener('cut', delayedResize, false);
el.addEventListener('paste', delayedResize, false);
el.addEventListener('drop', delayedResize, false);
el.addEventListener('keydown', delayedResize, false);
}
})
}());
// Use: <textarea auto-resize></textarea>
@yairEO
Copy link

yairEO commented Oct 16, 2013

I've made a jQuery / Zepto out of this:

http://codepen.io/vsync/pen/czgrf

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment