如何將一個元素放置在文本框下面的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... :-)