Textarea increase according to text

Question

Textarea increase according to text

Asked 7 years ago

Viewed 1,901 times

3

//However without using Function and picking up more than one TEXTAREA

 function autoResize()
    {
        objTextArea = document.getElementById('txtTextArea');
        while (objTextArea.scrollHeight > objTextArea.offsetHeight)
        {
            objTextArea.rows += 1;
        }
    }

<textarea id="txtTextArea" onkeydown="autoResize()"></textarea>

Unused function? explain that

– Rafael Augusto

2017/11/21 at 18:03
Taking only by the textarea ex: <textarea></<textarea> || without using the Function inside ... I don’t know how to understand ?

– Luciano Ramos

2017/11/21 at 18:05
This I understood, but why without using function?

– Rafael Augusto

2017/11/21 at 18:07
because here this textarea is generated automatically, it comes without id and without onkeydown

– Luciano Ramos

2017/11/21 at 18:08
And even with the function no problem at all

– Rafael Augusto

2017/11/21 at 18:10
You won’t have a problem

– Luciano Ramos

2017/11/21 at 18:11

Show 1 more comment

2 answers

4

Without using function, you can place Javascript directly in the element with oninput:

<textarea oninput='if(this.scrollHeight > this.offsetHeight) this.rows += 1'></textarea>

Or else create a Listener for all the textarea that have a specific class. In the example below, it will only have the effect of textarea with class .autoTxtArea:

var txtAreas = document.querySelectorAll('.autoTxtArea');
for(x=0;x<txtAreas.length;x++){
   txtAreas[x].addEventListener('input', function(){
        if(this.scrollHeight > this.offsetHeight) this.rows += 1;
   });
}

<textarea placeholder="Com efeito" class="autoTxtArea" id="txtTextArea"></textarea>
<br />
<textarea placeholder="Sem efeito" id="txtTextArea"></textarea>

Vallleeew That’s what it was ;-)

– Luciano Ramos

2017/11/21 at 18:16

Browser other questions tagged javascript textarea

You are not signed in. Login or sign up in order to post.

by Laércio Lopes • **4,352** points · Answer 1 · 2017-11-21T18:04:59+00:00

I believe what you want is to do without just associating an element as it is within the function by taking the element by id.

You can use the this and change the function as below:

function autoResize(el){
  while (el.scrollHeight > el.offsetHeight){
    el.rows += 1;
  }
}

<textarea onkeydown="autoResize(this)"></textarea>
<textarea onkeydown="autoResize(this)"></textarea>