If you are looking for a code that automatically expands a textarea as the user types in, here is the simple code to create that using jQuery. This simple code will helps you in many projects.
Here is the example:
<!DOCTYPE html>
<html>
<head>
<title>How to expand the text-area using Jquery?</title>
<script type="text/javascript">
var autoExpand = function (field) {
field.style.height = 'inherit';
var computed = window.getComputedStyle(field);
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>
</head>
<body>
<textarea rows="5"></textarea>
</body>
</html>
