Textarea X/Y 插入符号坐标 - jQuery 插件

Posted 2023-02-19

【中文标题】Textarea X/Y 插入符号坐标 - jQuery 插件

【英文标题】：Textarea X/Y caret coordinates - jQuery plugin [duplicate]

【发布时间】：2011-03-31 09:57:34

【问题描述】：

我希望在按键按下时获取文本区域内插入符号的 X/Y 坐标。我已经大力搜索但没有任何运气，您似乎可以获得位置，但不能获得屏幕上的 X/Y 坐标。

【参考方案1】：

这样做的唯一可行方法，AFAIK：

将 TEXTAREA 的内容附加到 DIV 将 DIV 附加到 DOM 在 DIV 中的 character offset of the caret 处放置一个 SPAN。 取 SPAN 的偏移量 ($(span).offset()...) 并减去 DIV 的偏移量（取决于您是否需要相对于 textarea 或页面的 x/y 坐标）

注意：将文本从 TEXTAREA 复制到 DIV 时，请确保复制可能影响偏移量的相关 CSS 属性（宽度、高度、填充、边距、边框、字体大小、行高等）。

【讨论】：

这是通用算法，但在涉及browser compatibility 时存在各种细微差别。 Component.io 团队整理了一个简单的plugin that works around all edge cases, and doesn't require jQuery。

【参考方案2】：

我为此写了this jQuery 插件。

【讨论】：

伟大的工作。使用简单。不能抱怨它:)

@WoIIe：我有一个小抱怨：如果有滚动条，位置可能会偏离一行。另外，caret position can be determined more simply, and without needing jQuery.

嗨，下一个问题是自动换行的长文本。