javascript - 如何使文本区域的插入符号始终保持在视口(viewport)内？

Question

我有一个页面，其中有一个很长的文本区域，用于编辑大量文本。通常，当您键入时，当插入符接近文本区域的底部时，页面会自动滚动以将插入符始终保持在视口(viewport)内(Firefox 一次滚动一行，Chrome 将插入符滚动到视口(viewport))。

我的问题来自于我正在根据用户键入的内容以编程方式更改文本区域的内容。在某些情况下，这涉及添加额外的内容，从而将插入符号推到 View 之外。

只要用户按下一个键，自动滚动就会启动，插入符号就会滚动到 View 中——但不会在之前滚动，所以当用户输入时，他们会看不到插入符号。我曾希望我可以简单地触发文本区域上的关键事件以使浏览器自动滚动，但触发的事件不能完全模拟用户行为，我没有得到响应。

我现在能看到的唯一解决方案是尝试通过以下方式获取插入符号的 XY 坐标:

1. 找到插入符的字符位置。
2. 构建一个反射(reflect) textarea 内容的 div，在插入符位置有一个标记。
3. 测量标记的位置。

有没有更简单的方法来做到这一点？

Answer 1

我不想建议为一个问题添加整个库，但考虑查看 CodeMirror。它会为您处理所有这些事情，而且使用起来相当简单。

http://codemirror.net/