如何将textarea滚动条默认设置为底部？

92

我有一个textarea，它随着用户输入的发送而动态地重新加载。它每隔几秒钟刷新一次。当此文本区域中的文本量超过文本区域的大小时，将出现滚动条。但是，滚动条并不是真正有用的，因为如果您开始向下滚动，则几秒钟后，文本区域会刷新，并将滚动条带回到顶部。我想将滚动条设置为默认显示最底部的文本。有人知道怎么做吗？

— 莫塞夫
source

更新后如何使文本区域滚动到底部的

— LoganMzz

184

非常简单，使用香草javascript：

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

— 威尔·P
source

53

您可以将其与jQuery一起使用

$(document).ready(function(){
    var $textarea = $('#textarea_id');
    $textarea.scrollTop($textarea[0].scrollHeight);
});

— Mahfud Harun
source

不太熟悉jQuery。我将把它放在与javascript相同的区域中还是我需要制作一个新的<script>元素并指定一个新的类型？

— moesef

1

并添加<script language ='javascript'src =' ajax.googleapis.com/ajax/libs/jquery/1.7.1/… >标签：）

— Will P.

8

添加站点范围的依赖性只是为了做一些您可以在普通JS中完成的事情，这听起来像个坏主意。仅仅因为可以做并不意味着你应该做。

— emix 2016年

0

我遇到了同样的问题，发现没有可以初始设置的属性来获得正确的滚动行为。但是，一旦在textArea中更新了文本，则在同一函数中之后，可以立即将focus（）设置为textArea以使其滚动到底部。然后，您也可以调用focus()其他一些输入字段，以允许用户在该字段中输入。这就像魅力：

function myFunc() {
    var txtArea = document.getElementById("myTextarea");
    txtArea.value += "whatever"; // doesn't matter how it is updated
    txtArea.focus();
    var someOtherElem = document.getElementById("smallInputBox");
    someOtherElem.focus();
}

— 米特什·拉瓦尔（Mitesh Raval）
source