我有一个宽度为800px,高度为500px的textarea。
如果我粘贴需要高度超过500px的文本,那么将创建滚动条以便向上和向下滚动。
但是,如果我在顶部粘贴一些内容,则它会再次跳到文本区域的底部。
我怎样才能停止这种行为?
提前致谢!
最佳答案
添加内容后,光标将放置在文本区域的底部,因此滚动到底部。
为防止这种情况,您需要将光标放在另一个位置。例如,如果您希望光标在顶部插入新文本时停留在文本中的相同位置,则可以获取所插入文本的长度,将其添加到当前光标位置,然后添加文本并放置光标两者之和。
在JavaScript中,您可以这样操作:
以textarea.selectionEnd
作为当前光标位置
将其添加到text.length
插入文字
将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,您可以先在文本区域中的任意位置单击,然后在输入字段中键入文本,然后单击按钮。文本将被添加,并且文本区域将使用正确的光标位置进行聚焦。