Textarea dynamic height resize scrolling issue

user_4609735 0
Viewed 208

I have a textarea field which loads data dynamically without a scrollbar. If the content goes too large, the page scrolls up if I try to type at the end of the textarea. Please help.

$(document).ready(function() {
  var data = "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32";
  $("#myText").val(data);
  
  var textAreaAutoHgt = function(parentId, elementId) {
    console.log(elementId);
    $(parentId).on('change keyup keydown paste cut', elementId, function(e) {
      $(this).height("auto").height(this.scrollHeight + "px");
    }).find('textarea').change();
  };

  textAreaAutoHgt("#container", "#myText");
});
#myText {
  resize: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="container">
  <textarea id="myText">Hello!</textarea>
</div>

height textarea resize jquery javascript
1 Answers

The issue is because you're listening to so many events, and as several of them get fired when a single key is pressed there's a conflict in the logic being run.

To fix the problem, just use the input event. This fires under all the same events you listed and avoids the conflicts:

$(document).ready(function() {
  var data = "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32";
  $("#myText").val(data);
  
  var textAreaAutoHgt = function(parentId, elementId) {
    $(parentId).on('input', elementId, function(e) {
      $(this).height("auto").height(this.scrollHeight + "px");
    }).find('textarea').trigger('input');
  };

  textAreaAutoHgt("#container", "#myText");
});
#myText {
  resize: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="container">
  <textarea id="myText">Hello!</textarea>
</div>

user_5194130
Related