CODEWITHSUNDEEP
javascripthtml
LordTaz
LordTaz

Reputation: 27

Resizing textbox after setting value to ""

I have a textarea that automatically grows when being typed in and some JS to clear the textarea if an option is changed. However the textarea doesn't shrink back when the value is set to "" via the JS. Any suggestions on how I can get this to work?

function clearTextArea(){
	document.getElementById('fldAdditionalInformation').value = "";
}

function auto_grow(element) {
  element.style.height = "0px";
  element.style.height = (element.scrollHeight+10)+"px";
}
<p>Change Value to clear Textbox:
<select onchange="clearTextArea();">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</p>

<textarea style="width:100%;" id="fldAdditionalInformation" onkeyup="auto_grow(this)"></textarea>

Upvotes: 0

Views: 49

Answers (1)

glyvox
glyvox

Reputation: 58049

You should run auto_grow after you clear the text area.

function clearTextArea(){
    var element = document.getElementById('fldAdditionalInformation');
    element.value = "";
    auto_grow(element)
}

function auto_grow(element) {
    element.style.height = "0px";
    element.style.height = (element.scrollHeight+10)+"px";
}
<p>Change Value to clear Textbox:
<select onchange="clearTextArea();">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</p>

<textarea style="width:100%;" id="fldAdditionalInformation" onkeyup="auto_grow(this)"></textarea>

Upvotes: 3

Related Questions