10

On one of my pages, I have a text area html tag for users to write a letter in. I want the content below the text area to shift down, or in other words, I want the text area to resize vertically with each line added to the text area and to have the content below simply be positioned in relation to the bottom of the text area.

What I am hoping is that javascript/jquery has a way to detect when the words wrap, or when a new line is added and based on that do a resize of the text area container.

My goal is to make the content below the text area stay the same distance from the bottom of the text no matter how much a user writes.

The text area creates a scroll bar when the text overflows.

Ryan Mortensen
  • 2,307
  • 3
  • 22
  • 27
  • Plugin is ok? First hit google: http://www.jacklmoore.com/autosize/ it's jQuery based. - Johannes <- This answer was the one deleted. Perfect solution that does exactly what I wanted. It is simple. – Ryan Mortensen Oct 03 '13 at 22:38

4 Answers4

17

Since I wasn't too happy with several solutions I found on the web, here's my take on it.

Respects min-height, max-height. Avoids jumping around and flashing the scrollbar by adding a buffer to the height (currently 20, may replace by line-height). However still shows scrollbar when max-height is reached. Avoids resetting the container scroll position by incrementally reducing the textarea height instead of setting it to 0. Will thusly also remove all deleted rows at once. Works in IE and Chrome without browser sniffing.

http://jsfiddle.net/Nd6B3/4/

<textarea id="ta"></textarea>

#ta {
    width:250px;
    min-height:116px;
    max-height:300px;
    resize:none;
}

$("#ta").keyup(function (e) {
    autoheight(this);
});

function autoheight(a) {
    if (!$(a).prop('scrollTop')) {
        do {
            var b = $(a).prop('scrollHeight');
            var h = $(a).height();
            $(a).height(h - 5);
        }
        while (b && (b != $(a).prop('scrollHeight')));
    };
    $(a).height($(a).prop('scrollHeight') + 20);
}

autoheight($("#ta"));
Thaylon
  • 453
  • 5
  • 12
  • 1
    Nice solution. +1. But I don't like the while. Even better in my opinion: `function autoheight(a) { $(a).height(20); $(a).height($(a).prop('scrollHeight') + 20); }` – Walery Strauch Apr 14 '14 at 14:20
  • 1
    Yes, it'd be much cleaner that way, unfortunately it will lose the scroll position of its container (fe the body) when you reduce the height to 20 in one go. – Thaylon May 02 '14 at 14:12
  • You just gave answer to this difficult question: http://stackoverflow.com/questions/29930300/force-resizement-when-reading-text-from-file. I will wait for you to make an answer, else I am going to post mine tonight. – gsamaras Apr 30 '15 at 11:51
  • This simple method did magic for me! – Raja Sep 23 '16 at 20:11
  • 1
    The only solution I've seen so far (including a lot of libraries) which does not make the scroll bar lose it's position! Thank you! I was looking for a way to handle this problem (by inserting a div of the same height as the textarea before the "1px" height hack) but your solution (eventhough it has a while loop) seems cleanest to me. – Dex Jul 24 '17 at 13:04
10

http://www.jacklmoore.com/autosize/

Download the plugin first:

Step 1: Put "jquery.autoresize.min.js" where you keep your jquery plugins.

Step 2: Link the file in HTML -> <script src="jquery.autosize.min.js" type="text/javascript" ></script> Be sure that this link comes after your jquery link, and before your own javascript/jquery code links.

Step 3: In your javascript code file simply add $('#containerToBeResized').autosize();

Ryan Mortensen
  • 2,307
  • 3
  • 22
  • 27
3
$('textarea').keyup(function (e) {
    var rows = $(this).val().split("\n");
    $(this).prop('rows', rows.length);
});

this work sample.

B. Bilgin
  • 774
  • 12
  • 22
1

See this Fiddle from this answer. That increases the height of the textarea based on the number of lines.

I think that's what you're asking for.

Copied the code from the answer below:

HTML

<p>Code explanation: <a href="http://www.impressivewebs.com/textarea-auto-resize/">Textarea Auto Resize</a></p>

<textarea id="comments" placeholder="Type many lines of texts in here and you will see magic stuff" class="common"></textarea>

JS

/*global document:false, $:false */
var txt = $('#comments'),
    hiddenDiv = $(document.createElement('div')),
    content = null;

txt.addClass('txtstuff');
hiddenDiv.addClass('hiddendiv common');

$('body').append(hiddenDiv);

txt.on('keyup', function () {

    content = $(this).val();

    content = content.replace(/\n/g, '<br>');
    hiddenDiv.html(content + '<br class="lbr">');

    $(this).css('height', hiddenDiv.height());

});

CSS

body {
     margin: 20px;
}

p {
    margin-bottom: 14px;
}

textarea {
    color: #444;
    padding: 5px;
}

.txtstuff {
    resize: none; /* remove this if you want the user to be able to resize it in modern browsers */
    overflow: hidden;
}

.hiddendiv {
    display: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
}

/* the styles for 'commmon' are applied to both the textarea and the hidden clone */
/* these must be the same for both */
.common {
    width: 500px;
    min-height: 50px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    overflow: hidden;
}

.lbr {
    line-height: 3px;
}
Community
  • 1
  • 1
Adam C
  • 86
  • 1
  • 4