textarea un campo de área de texto que carga datos dinámicamente sin una barra de desplazamiento. Si el contenido es demasiado grande, la página se desplaza hacia arriba si trato de escribir al final del área de textarea . Por favor ayuda.
$(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>El problema es que está escuchando tantos eventos, y como varios de ellos se disparan cuando se presiona una sola tecla, hay un conflicto en la lógica que se está ejecutando.
Para solucionar el problema, simplemente use el evento de input . Esto se dispara bajo los mismos eventos que enumeró y evita los conflictos:
$(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>