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>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>