Resize textarea automatically?

Question

I have this part of code :

let o = document.getElementById("name");
        let a  = document.getElementById('customerstype');
        let p = document.getElementById("parent");
        let h  = document.getElementById('hierarchy');
        let s  = document.getElementById('status');
        o.style.height = (o.scrollHeight - 10)+"px";
        a.style.height = (a.scrollHeight - 10)+"px";
        p.style.height = (p.scrollHeight - 10)+"px";
        h.style.height = (h.scrollHeight - 10)+"px";
        s.style.height = (s.scrollHeight - 10)+"px";

And for every textarea i have i need to say document.getElementyById. Is there any other way to do this and not to have 10lines of code, but to have unique for every textarea.

http://www.jacklmoore.com/autosize/ < if > `jquery` can be used — Shekhar Pankaj, Jun 29 '17 at 11:50
@None Use class and then a for loop to iterate over all the collection. — abhishekkannojia, Jun 29 '17 at 11:50
@abhishekkannojia will that add same height on all textareas? Because i want to autoresize textarea depends on content — None, Jun 29 '17 at 11:51

score 1 · Accepted Answer · answered Jun 29 '17 at 11:55

1

You can use a class and then a for loop to iterate through all the elements:

var elements = document.querySelectorAll('.txtarea'); // Assuming class txtarea
elements.forEach(function(elem) {
    elem.style.height = (elem.scrollHeight - 10) + 'px';
});

answered Jun 29 '17 at 11:55

abhishekkannojia

2,796
23
32

score 1 · Answer 2 · answered Jun 29 '17 at 11:57

1

function check(t){ 
  t.style.height = (t.scrollHeight - 10)+"px";
}

textarea{
  height: 200px;
}

<textarea id="name" onkeydown="check(this)"></textarea>
<textarea id="customerstype" onkeydown="check(this)"></textarea>
<textarea id="parent" onkeydown="check(this)"></textarea>
<textarea id="hierarchy" onkeydown="check(this)"></textarea>
<textarea id="status" onkeydown="check(this)"></textarea>

I don't quite understand you demand, but i hope this can be helpful

answered Jun 29 '17 at 11:57

mt eee

80
10

How can i have on init automatically resized textarea? Now is only when i enter – None Jun 29 '17 at 12:19
"automatically resized textarea" means when you type things into textarea , as more things you input as the textarea become higher? – mt eee Jun 29 '17 at 12:24
yes.. but on start i will have some data in textarea so i want to resize textarea depends on that data – None Jun 29 '17 at 18:59
[check this](https://stackoverflow.com/questions/17772260/textarea-auto-height) this may help you – mt eee Jun 30 '17 at 08:12
this is jquery i dont want to use jquery – None Jun 30 '17 at 08:17
You just need to replace the grammar, it's easy. – mt eee Jun 30 '17 at 09:22

score 0 · Answer 3 · answered Jun 29 '17 at 11:57

Use class as I mentioned in comments like this --

<textarea id="name" class="myTextArea"></textarea>
<textarea id="customerstype" class="myTextArea"></textarea>
<textarea id="parent" class="myTextArea"></textarea>
<textarea id="hierarchy" class="myTextArea"></textarea>

Loop through class elements-

let o = document.getElementsByClassName("myTextArea");
for(var ele in o){
    o[ele].style.height = (o.scrollHeight - 10)+"px";
}

Fiddle -- https://jsfiddle.net/cr5ss9L0/

Marco Luzzara · Answer 4 · 2017-06-29T12:03:13.633

0

You can use document.getElementsByClassName('class_name')(if your textAreas have a common class) or document.getElementsByTagName('tag_name'). These function return a NodeList object, but you can think of it as an array of DOM elements, on which you can use style property. Like others have said, the quickest way to set the style property on all of these elements is using a for loop ( or better a foreach loop).

edited Jun 29 '17 at 12:03

answered Jun 29 '17 at 11:58

Marco Luzzara

5,540
3
16
42

Resize textarea automatically?

4 Answers4