Auto-expanding textarea

by

Reset the height before Using scrollHeight to expand/shrink the textarea correctly. Math.min() can be used to set a limit on the textarea’s height.

Code:

var textarea = document.getElementById("textarea");
var heightLimit = 200; /* Maximum height: 200px */

textarea.oninput = function() {
  textarea.style.height = ""; /* Reset the height*/
  textarea.style.height = Math.min(textarea.scrollHeight, heightLimit) + "px";
};

Fiddle: http://jsfiddle.net/gjqWy/155

Note: The input event is not supported by IE8 and earlier. Use keydown or keyup with onpaste and/or oncut if you want to support this ancient browser as well.

More Related Contents:

  1. operator === in JavaScript code change to three horizontal lines [closed]
  2. How to efficiently count the number of keys/properties of an object in JavaScript
  3. Convert string to variable name in JavaScript
  4. Getters \ setters for dummies
  5. Can javascript access a filesystem? [duplicate]
  6. What is an exclamation point in JavaScript?
  7. JavaScript inheritance: Object.create vs new
  8. Get list of data-* attributes using javascript / jQuery
  9. Adding new data to firebase users
  10. Executing JavaScript without a browser?
  11. broken toFixed implementation [duplicate]
  12. How can I make window.showmodaldialog work in chrome 37?
  13. How to set HTML content into an iframe
  14. Is it possible to enable unbounded number of renderers in THREE.js?
  15. JavaScript regex – How to wrap matches with tag?
  16. Preview images before upload
  17. Debug message “Resource interpreted as other but transferred with MIME type application/javascript”
  18. Reload browser window after POST without prompting user to resend POST data
  19. node.js – Code Protection?
  20. Downloading Canvas element to an image
  21. How to add prefix to array values?
  22. Get Knex.js transactions working with ES7 async/await
  23. How to use the ‘main’ parameter in package.json?
  24. How to remove undefined and null values from an object using lodash?
  25. Equivalent of Firefox’s “error console” in other browsers
  26. How do you swap DIVs on mouseover (jQuery)?
  27. how to update time regularly?
  28. Validate phone number using angular js
  29. getting last page URL from history object – cross browser?
  30. Cross-domain XMLHttpRequest using background pages

Leave a Comment