Skip to content

Instantly share code, notes, and snippets.

@monis01

monis01/expandTextArea.html

Created February 4, 2018 10:51
Show Gist options
  • Save monis01/0533c2904ca8e3d50e59258fa8f3d826 to your computer and use it in GitHub Desktop.
Save monis01/0533c2904ca8e3d50e59258fa8f3d826 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
expandTextArea.html
<!-- taken from -->
<!-- http://www.rssheap.com/article/?p=YXJ0aWNsZWlkPTE3MjkyMTUmdGFiPXdlZWsmZ3VpZD1mMDRhNDZiZDRiOTY0ZDMxYWJhNDkyZGQ3OWE2YzQ2ZSZmaWx0ZXI9 -->
<!-- @demo -->
<!-- https://jsfiddle.net/cferdinandi/mqwwpL6u/ -->
<style>
textarea {
min-height: 5em;
max-height: 50vh;
width: 100%;
}
</style>
<body>
<textarea></textarea
<script>
var autoExpand = function (field) {
// Reset field height
field.style.height = 'inherit';
// Get the computed styles for the element
var computed = window.getComputedStyle(field);
// Calculate the height
var height = parseInt(computed.getPropertyValue('border-top-width'), 10)
+ parseInt(computed.getPropertyValue('padding-top'), 10)
+ field.scrollHeight
+ parseInt(computed.getPropertyValue('padding-bottom'), 10)
+ parseInt(computed.getPropertyValue('border-bottom-width'), 10);
field.style.height = height + 'px';
};
document.addEventListener('input', function (event) {
if (event.target.tagName.toLowerCase() !== 'textarea') return;
autoExpand(event.target);
}, false);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment