如何将一个元素放置在文本框下面的JavaScript中？

Question

我有一个长文本字段，我想要做的是当用户输入'@'字符时，用户列表就像典型的自动完成一样。不过，我希望用户列表出现在“@”字符的下方，该字符可以从文本框的起始处开始，长度为20-30个字符。

我发现了许多jQuery自动完成插件，但没有将列表放在当前插入符的位置下面。

我可以使用$('#textfield').position()获得文本字段位置，并且我可以使用something like this获取插入位置，但是可以从文本值获取字符索引，而不是像素位置。

如何获取文本字段相对于页面的当前位置（以像素为单位），以便将元素放置在其下方？

Answer 1

中继这一anwsear：Calculate text width with JavaScript

你可以做的是这是在屏幕上可见一个div：隐藏 然后每一个新的性格特征已经被输入到文本框改变div的内部HTML时间

所以textbox的值和div的innerhtml总是会被同步。

然后当你想弹出你的自动完成，你将添加div的宽度。到 偏移文本框的左侧位置。

和多数民众赞成它...

和avcorse您将需要div和文本框将具有相同的字体...

Answer 2

这个jQuery插件做你以后：

http://plugins.jquery.com/project/caretPosition

我没有测试它，但它看起来像它具有相同的内容<textarea>（直到光标）创建一个临时<span>，使野生assumpti的代码会在测量时会讨论字体，行高，空白和换行。

你可以尝试将其扩展到：不从目标

1. 拷贝字体，行高，空格和换行风格<textarea>

2. 隐藏临时<span>影响测量通过将其包裹在<div style="height: 0; overflow: hidden;">或将其绝对定位-9999px，-9999px

Answer 3

$(this).position().top ; 
$(this).position().left ; 
$(this).position().right ; etc... :-)