Textarea value appended by button click does not scroll-CodePudding

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

CodePudding user response：

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>