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.

Improve this question
1
  • Plugin is ok? First hit google: 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. Commented Oct 3, 2013 at 22:38

4 Answers 4

Reset to default
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"));
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

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); }
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.
You just gave answer to this difficult question: stackoverflow.com/questions/29930300/…. I will wait for you to make an answer, else I am going to post mine tonight.
This simple method did magic for me!
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.
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();

Improve this answer

2 Comments

Page doesn't even load in IE8.
This respects min-height and max-height.
3 
$('textarea').keyup(function (e) {
    var rows = $(this).val().split("\n");
    $(this).prop('rows', rows.length);
});

this work sample.

Improve this answer

5 Comments

Nice idea, but dosen't work if one line is longer than width of textarea.
$(this).val() -> this.value and $(this).prop('rows', rows.length) -> this.rows = this.value.split("\n")
jsfiddle.net/Zu5tY/1 this work sample.
Still same issue imgur.com/uu5WzHV
The width of sentence is not being checked.
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;
}
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.