textarea中的新插入使滚动条跳到底部

时间:2015-05-03 06:19:40

标签: javascript html css

我有一个宽度为800像素,高度为500像素的文本区域。

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

但如果我在顶部粘贴一些东西,它会再次跳到textarea的底部。

如何阻止此行为?

提前致谢!

1 个答案:

答案 0 :(得分:1)

添加内容时,光标位于textarea的底部,因此会滚动到底部。

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

在JavaScript中你可以这样做:

  1. text.length作为当前光标位置
  2. 将其添加到textarea.selectionStart
  3. 插入文字
  4. textarea.selectionEndfunction addText(area, text) { var cursorPos = area.selectionEnd; var textLength = text.length; area.value = text + area.value; area.selectionEnd = area.selectionStart = cursorPos + textLength; area.focus(); } 设置为第2点的总和
  5. 这是一个示例函数:

    {{1}}

    我还创建了一个demo,您可以先在textarea中的任意位置单击,然后在输入字段中键入文本,然后单击按钮。文本将被添加,textarea将以正确的光标位置聚焦。

相关问题