如何防止文本区域滚动到顶部时，它的值改变

How to prevent textarea from scrolling to the top when its value changed?

本文关键字：改变 顶部 文本 何防止 区域 滚动      更新时间：2023-09-26

考虑以下示例:(现场演示)

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中检查过，不确定其他浏览器是否如此)。

为什么会这样?

我该如何解决这个问题?

我在这里找到了一个可能的解决方案，但我想知道是否还有其他解决方案。

您可以保存scrollTop偏移量，设置其值，并将scrollTop重置为旧偏移量:

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

试试:http://jsfiddle.net/QGJeE/7/

另一个解决方案(很难暗示，因为没有唯一的跨浏览器方式):

不改变textarea的值，而是创建textarea内容的textRange并修改range文本

相关文章：