javascript - quitar - Cómo tener un área de texto para mantener desplazado a la parte inferior cuando se actualiza

onchange onblur onfocus

Question

Mi problema está un poco fuera de lugar aquí, así que intentaré explicarlo lo mejor que pueda.

Tengo un área de texto, que tiene css de #object{overflow:hidden;resize:none;} . Estoy tratando de evitar que genere una barra de desplazamiento mientras que también se redimensiona. Este área de texto se sincroniza con la consola de un script externo, lo que significa que se actualiza. Sin embargo, de forma predeterminada, permanecerá en la parte superior a menos que resaltes el texto, arrastrando hacia la parte inferior del elemento. Esta sería la única forma de desplazarse hacia abajo con excepción de las teclas de flecha, naturalmente.

Programáticamente, ¿hay alguna manera de mantener el área de texto hasta el final al actualizar? Sería bueno tener un desplazamiento automático para adaptarse a su caso de uso.

Answer 1

Al usar jQuery, puedes averiguar cuándo cambia el contenido del área de textarea usando:

$("#object").change(function() {
  scrollToBottom();
});

Y desplácese hasta la parte inferior utilizando:

function scrollToBottom() {
  $(''#object'').scrollTop($(''#object'')[0].scrollHeight);
}

Código de desplazamiento tomado de jquerybyexample.blogspot.com .

Answer 2

Puedes hacerlo por javascript. Establezca la propiedad scrollTop del área de texto con la propiedad scrollHeight como a continuación:

document.getElementById("textarea").scrollTop = document.getElementById("textarea").scrollHeight

Answer 3

Complemento genérico de JQuery

Aquí un plugin jquery genérico para scrollBottom de cualquier elemento:

$.fn.scrollBottom = function() {
  return $(this).scrollTop($(this)[0].scrollHeight);
};

uso:

$("#logfile").val( $("#logfile").val() + "this is new line test/n" ).scrollBottom();

Answer 4

Usando Javascript

var textarea = document.getElementById(''textarea_id'');
textarea.scrollTop = textarea.scrollHeight;

Usando Jquery

$(''#textarea_id'').scrollTop($(''#textarea_id'')[0].scrollHeight);​​​

Answer 5

function checkTextareaHeight(){
   var textarea = document.getElementById("yourTextArea");
   if(textarea.selectionStart == textarea.selectionEnd) {
      textarea.scrollTop = textarea.scrollHeight;
   }
}

Llame a esta función cada vez que cambie el contenido del área de texto. Si no puede editar la influencia externa, active esta función periódicamente usando setInterval.