Textarea value appended by button click does not scroll

March 2, 2022

I have a button that appends text to a textarea, but the updated text does not scroll up when it overflows at the bottom. However, it scrolls fine if I type directly in the textarea. How can I fix this?

$('#add-click').click(function() {
  let myVal = $("textarea").val();
  $("textarea").val(myVal+"Some text.");
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea rows="4" cols="50"/></textarea>
<button id="add-click">Insert text</button>

https://codepen.io/rajndev/pen/YzERLgO

>Solution :

You could achieve this by using jQuery scrollHeight and scrollTop

$('#add-click').click(function() {
  let myVal = $("textarea").val();
  $("textarea").val(myVal+"add,add,add,add,add,add,add,add,");
  $("textarea").scrollTop($("textarea").get(0).scrollHeight)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea rows="4" cols="50"/></textarea>
<button id="add-click">Insert text</button>