Creating a textarea with auto-resize

Making it cross-browser compatible (don't let any browser feel left out)

Never forget older browsers

Browsers are like people, diverse and scattered across versions. Always remember to ensure cross-browser support:

var textarea = document.querySelector('textarea');

function autoResize() {
  textarea.style.height = 'auto';
  textarea.style.height = textarea.scrollHeight + 'px';
}

// A bit of browser-history love for older versions.
if (textarea.attachEvent) {
  textarea.attachEvent('oninput', autoResize);
} else {
  textarea.addEventListener('input', autoResize);
}


Capturing events like a secret agent

Don't forget, paste, cut, and drop are actions too! Auto-resize should cover these espionage-level events:

['input', 'cut', 'paste', 'drop'].forEach(function(event) {
  textarea.addEventListener(event, autoResize);
});


The late guys: Dealing with content loaded post-initialization

Your <textarea> may sometimes be the last one to know about content loaded. Be nice and include a heads up with initialization:

window.addEventListener('load', autoResize);


Styling for readability and function (because form matters)

Minimalism to keep users focused

Less is often more. Try these minimal styles to keep users laser-focused on their content:

textarea {
  min-height: 40px;
  overflow-y: hidden;
  border: none;
  background-color: #f5f5f5; /* For subtle background */
  resize: none; /* No-user-resize policy */
}


Dynamic resizing and accommodative padding

A well-fed <textarea> grows, similarly expand your <textarea> gracefully with responsive design and padding accommodations:

function autoResize() {
  var pad = 10; // 10px padding but feel free to adjust
  this.style.height = 'auto';
  this.style.height = (this.scrollHeight + pad) + 'px';
}


Performance considerations (No textarea left behind)

Handling a crowd: Multiple textareas

Auto-sizing can be an attention hog with multiple textareas. Opt for some crowd control like debouncing or intervals for smooth user experiences.

Independence is key: No reliance on libraries

While jQuery may whisper sweet nothings in your ear, maintain dojo discipline with vanilla JavaScript for a lean yet potent solution.

Enhancing user experience: Pro tricks up your sleeve

Hit the ground typing

Give your <textarea> the red carpet it deserves with auto-focus on page load:

window.addEventListener('load', function () {
  document.querySelector('textarea').focus();
});


Visual testing with JSFiddle

Unleash your inner experimenter! Put your changes to the test with a hands-on approach on JSFiddle.