javascript - 文本区域中的新插入使滚动条跳到底部

Question

我有一个宽度为 800px、高度为 500px 的文本区域。

如果我粘贴的文本需要高度超过 500 像素，则会创建滚动条以便上下滚动，这很好。

但是如果我在顶部粘贴某些内容，它会再次跳到文本区域的底部。

我怎样才能阻止这种行为？

提前致谢!

Answer 1

添加内容时，光标位于文本区域的底部，因此滚动到底部。

为了防止这种情况，您需要将光标放在另一个位置。例如，如果您希望光标停留在文本中的同一位置，同时在顶部插入新文本，您可以获取插入文本的长度，将其添加到当前光标位置，然后添加文本并放置光标两者之和。

在 JavaScript 中你可以这样做:

1. 将textarea.selectionEnd作为当前光标位置
2. 将其添加到text.length
3. 插入文字
4. 将 textarea.selectionStart 和 textarea.selectionEnd 设置为点 2 的总和

这是一个示例函数:

function addText(area, text) {
    var cursorPos = area.selectionEnd;
    var textLength = text.length;
    area.value = text + area.value;
    area.selectionEnd = area.selectionStart = cursorPos + textLength;
    area.focus();
}

我还做了一个demo您可以首先单击文本区域中的任意位置，然后在输入字段中键入文本，然后单击按钮。将添加文本，并且文本区域将聚焦在正确的光标位置。