1

I have many different queried field data returning various height and lenghts from a database to multiple variables that are mapped to its own textarea on a web page for display. I need a way to have each textarea auto-fit the data according to its size returned.

Currently I use a javascript function(data-autoresize) for each textarea to allow users to expand the text when the fields are larger than the textarea:

i.e.

$(document).ready(function () {
    jQuery.each(jQuery('textarea[data-autoresize]'), function () {
        var offset = this.offsetHeight - this.clientHeight;
        var resizeTextarea = function (el) {
            jQuery(el).css('height', 'auto').css('height', el.scrollHeight + offset);
        };

        jQuery(this).on('keyup input', function () {
            resizeTextarea(this);
        }).removeAttr('data-autoresize');
    });
});

<textarea title="If needed, hit ENTER to expand this text area." class="textExpand" readOnly="true" data-autoresize rows="10"> **returnDataFieldVar1** <textarea>

This is useful for users to expand manually after data is loaded and too large for the default textarea size of 10 rows. But to make this more efficient and functional, it would be preferred to have each textarea auto-fit to the data that was returned from the query and eliminate users having to manually expand the textareas on the webpage. Any pointers or code examples on how to do this is appreciated!

Andreas
  • 21,535
  • 7
  • 47
  • 56
Ltaylor
  • 85
  • 8

1 Answers1

2

You looking for something like this?

$(window).on('resize', function(e) {
  $('textarea[data-autoresize]').each(function() {
    var $textarea = $(this);
    $textarea.css('height', 'auto');
    $textarea.css('height', $textarea.prop('scrollHeight') + 'px');
  });
})

$('textarea[data-autoresize]').each(function() {
  $(this).on('keyup input change paste propertychange', function(e) {
    var $textarea = $(this);
    $textarea.css('height', 'auto');
    $textarea.css('height', $textarea.prop('scrollHeight') + 'px');
  });
});

https://jsfiddle.net/ff0xjm4q/

On any change set the height to the scrollHeight.

Also handle it on window resize as well since there is no textarea resize event.

Sean Wessell
  • 3,490
  • 1
  • 12
  • 20