make text input autoresize as typing

Question

i want to have a text input with autoresize when the user types more then one line.

i tried using html5 contenteditable but it's too complicate to get the data. (this solution isn't working for me Extracting text from a contentEditable div and also there is this warning " It is also possible that an update to any browser could break this function if they change how they implement contentEditable.")

i also tried this plugin but i don't know how to update the textarea content. after typing if i'm checking for $('textarea').html() i'm getting empty value.

Edit: basically, the most important thing for me is to get line break if the user press on enter key.

Do you want to use a textarea or ? – Praveen Singh Aug 09 '15 at 06:47 — Praveen Singh, Aug 09 '15 at 06:47
@PraveenSingh i don't mind. – user2587454 Aug 09 '15 at 07:06 — user2587454, Aug 09 '15 at 07:06

score 1 · Accepted Answer · answered Aug 09 '15 at 15:56

You can write your own plugin to autoresize a text area. Try this snippet:

$(document).ready(function() {
 $('.txt').on('keyup', function(event) {
     var textareaElm = event.target;
        if (textareaElm.scrollHeight > textareaElm.clientHeight) {
            textareaElm.style.height = textareaElm.scrollHeight + "px";
        }
 });
})

.txt {
 width: 200px;
 height: 50px;
 transition: height 0.2s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<textarea class="txt"></textarea>

Here is a jsfiddle for the same: http://jsfiddle.net/t1cg7f20/

This example uses jQuery. Let me know if you need a JS only solution.

the autoresize is working great. but i'm still not getting line break with val(). the value is: "1 2 3 4 5" — user2587454, Aug 10 '15 at 08:07

score 0 · Answer 2 · answered Aug 09 '15 at 06:49

0

To access a <textarea>s value you'll want to use

$('textarea').val()

It should also work with your plugin.

answered Aug 09 '15 at 06:49

Patrick Hübl-Neschkudla

688
7
22

i'm getting an empty value – user2587454 Aug 09 '15 at 08:13
I just checked on the plugin website - could you try if `$('textarea').value` works for you? – Patrick Hübl-Neschkudla Aug 09 '15 at 08:37
Thanks. value is working for me BUT i don't get line break. if the user pressed on 'Enter' i want to see a line break and not just white space. – user2587454 Aug 09 '15 at 10:30
The line breaks are there, they are just hidden characters which you have to check yourself if you want to display them in html or so - check this answer: http://stackoverflow.com/a/12896554/1856221 – Patrick Hübl-Neschkudla Aug 09 '15 at 15:18

score 0 · Answer 3 · answered Aug 10 '15 at 09:41

Thanks to @Praveen Singh, i'm using his code to autoresize:

$(document).ready(function() {
$('.txt').on('keyup', function(event) {
    var textareaElm = event.target;
    if (textareaElm.scrollHeight > textareaElm.clientHeight) {
        textareaElm.style.height = textareaElm.scrollHeight + "px";
    }
});

})

.txt {
width: 200px;
height: 50px;
transition: height 0.2s linear;

}

and replace(/\n\r?/g, '<br />') to show line break.

make text input autoresize as typing

3 Answers3