如何在javascript中将元素放在文本框插入符号下面？

Question

我有一个很长的文本字段，我想要做的是，当用户键入“@”字符时，用户列表就像典型的自动完成一样。但是我希望用户列表显示在“@”字符下面，从文本框的开头可以是20-30个字符。

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

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

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

Answer 1

转发此anwsear：Calculate text width with JavaScript

你可以做的是在屏幕上有一个可见的div：隐藏 然后每次在文本框中输入新的字符时，都会更改div的内部html

所以文本框值和div innerhtml将始终同步。

然后当您想要弹出自动填充时，您将添加div的宽度。到了 偏移文本框的左侧位置。

就是这样......

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

Answer 2

这个jQuery插件可以满足您的需求：

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

我还没有对它进行测试，但是通过代码看起来它会创建一个与<span>（直到光标）相同内容的临时<textarea>并对字体做出疯狂的假设，测量时的行高，空格和自动换行。

您可以尝试将其扩展为：

1. 从目标<textarea>

复制字体，行高，空白和自动换行样式

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

Answer 3

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