How do I expand a new line for textarea when i press enter?

Question

Suppose i have a textarea with the size of a normal textbox, how do i make it stretchable when i press enter or crtl+enter to make a new line for user to type.

For example, i type something in textarea in the first line, then i press enter and the textarea will expand a new line for me to enter data.

<td>
    <textarea rows="5" cols="50" name="description[]">
        <?php echo $row[ 'description']; ?>
    </textarea>
</td>

Above is the textarea that i mentioned.

score 1 · Answer 1 · edited May 23 '17 at 10:25

1

You will have to use javascript. Specifically, you could use a javascript framework called jQuery. Check out this answer: Auto expand a textarea using jQuery

edited May 23 '17 at 10:25

Community

1
1

answered Aug 29 '13 at 01:39

htxryan

2,871
2
21
21

If it can be done using jQuery, it can be done using javascript – dc5 Aug 29 '13 at 01:41
1

@dc5 Correct. I didn't mean to imply that jQuery itself was required. I'll edit my answer to be more clear. – htxryan Aug 29 '13 at 01:42
if it can be done using javascript, it can be done in less time/lines of code with jQuery – hammus Aug 29 '13 at 01:43

score 1 · Answer 2 · answered Aug 29 '13 at 01:42

1

You could try some jQuery:

$("textarea").keyup(function(e) {
    if(e.keyCode == 13) //13 is the ASCII code for ENTER
        {
            var rowCount = $(this).attr("rows");
            $(this).attr({rows: rowCount + 5});
        }
});

answered Aug 29 '13 at 01:42

hammus

2,602
2
19
37

http://stackoverflow.com/a/5346855/2716915 This work for me :) Though it's a long code, but i guess i understand the workflow.Thank to you all anyway :) – nickee Aug 29 '13 at 02:07

score 0 · Answer 3 · answered Aug 29 '13 at 01:47

Alternatively - you could use a div with contenteditable set true.

<td>
  <div id="description[]" contenteditable="true">
    <?php echo $row['description']; ?>
  </div>
</td>
<input name="description[]" type="hidden" value="">

Then add a JS function to the form submit (assuming this is for a form) that sets the value of the hidden input to the inner text/content of the div

function updateText() {
  content = document.getElementById('description[]').textContent || document.getElementById('description[]').innerText;
  document.querySelector('[name="description[]"]').value = content;
}

score 0 · Answer 4 · answered Aug 29 '13 at 01:48

0

Check out this auto grow jQuery plugin - https://github.com/akaihola/jquery-autogrow

answered Aug 29 '13 at 01:48

Matt Millican

4,044
4
38
55

score 0 · Answer 5 · answered May 27 '20 at 11:06

I used like this:

Jquery:

$('#parent-block-for-textarea').on('keyup', 'textarea.autoexpand', function(ev) {
        var t = ev.target;
        t.style.height = 'auto';
        t.style.height = (t.scrollHeight) + 'px';
});
//this also works on dynamically added textarea.

HTML:

<textarea class="autoexpand"></textarea>

Without using jquery:

<textarea onkeyup="this.style.height='auto';this.style.height=(this.scrollHeight)+'px'"></textarea>

How do I expand a new line for textarea when i press enter?

5 Answers5