JavaScript：在textarea中查找特定字符串的垂直像素位置

我有一个HTML文本区域作为Chrome内部运行的小型文本编辑器的基础，其中包含搜索功能（因为我需要超出浏览器提供的搜索功能）。对于更长的文本，这意味着我需要JavaScript在选择找到的文本后滚动到正确的位置。这可以通过计算字体的行高度乘以找到的文本的行号（后者通过计算换行符来获得），然后设置textareaElement.scrollTop ...但只有当textarea设置为wrap =“off”时正常工作。当它包装时，我有时需要它，我不能简单地通过计算换行符来计算行数，并且我的滚动位置算法会稍微偏离。JavaScript：在textarea中查找特定字符串的垂直像素位置

如何才能找到找到的选定文本的正确位置？

来源

2009-10-12 Philipp Lenssen

我已经为log4javascript中的日志控制台的搜索功能解决了此问题。我的代码将搜索结果包围在风格属性在您滑过搜索结果时发生更改的标签中。最初，我在当前搜索结果跨度上调用了scrollIntoView()，但我认为在某些浏览器（例如，log4javascript支持IE 5）时遇到了问题，并最终根据跨度和scrollLeft的offsetLeft和offsetTop属性编写了自己的滚动功能， scrollTop容器的属性。我怀疑scrollIntoView()在Chrome中可以正常工作，所以你应该确定使用它。

来源

2009-10-12 08:25:06

谢谢你的回答; scrollIntoView（）看起来很有趣。我不得不承认，虽然我没有使用任何div或span元素，所以我认为它不起作用 - 我想要滚动到视图中的内容仅仅是大型textarea元素中当前选定的文本部分... – 2009-10-15 09:02:18

好。我正在努力想办法达到你想要的。如果您的textarea使用固定宽度的字体和固定数量的列，则可以使用它来计算包装线的数量。除此之外，我看不到一种做法。 – 2009-10-15 11:02:15

@Phillip Lenssen：你可以用临时跨度将当前选择区域卷动到视图中，然后使用DOM操作将其删除，也许？ – sirlark 2010-05-11 11:15:52

JavaScript：在textarea中查找特定字符串的垂直像素位置

回答

相关问题