如何防止textarea在值改變時滾動到頂部？

Question

請考慮以下示例:( 此處為現場演示 ）

HTML：

<textarea></textarea>
<div id="button">Click Here</div>

CSS：

textarea {
    height: 80px;
    width: 150px;
    background-color: #bbb;
    resize: none;
    border: none;
}
#button {
    width: 150px;
    background-color: #333;
    color: #eee;
    text-align: center;
}

JS：

$(function() {
    var textarea = $("textarea");

    textarea.val("Hello\nStack\nOverflow!\nThere\nAre\nLots\nOf\nGreat\nPeople\nHere");

    $("#button").click(function() {
        textarea.val(textarea.val() + "!");
    });

    textarea.scrollTop(9999).focus(); // Arbitrary big enough number to scroll to the bottom
});

單擊#button ， textarea值會發生變化，由於某種原因，滾動條會顯示在頂部（我在Firefox中檢查了這一點，不確定其他瀏覽器）。

為什么會這樣？

我怎么能解決這個問題？

我在這里找到了一個可能的解決方案，但我想知道是否有其他解決方案。

Answer 1

您可以保存scrollTop偏移量，設置值，並將scrollTop重置為舊偏移量：

var $textarea = ...;
var top = $textarea.scrollTop();
$textarea.val('foo');
$textarea.scrollTop(top);

在這里試試： http ： //jsfiddle.net/QGJeE/7/

Answer 2

另一個解決方案（更難以暗示，因為沒有獨特的跨瀏覽器方式）：

而不是更改textarea的值創建textarea的內容的textRange並修改范圍文本。