textarea的autcompleting - 定位文本輸入上使用JavaScript

Question

我有一個問題，我需要在這裏一隻手一個textarea的光標位置的頂部...

我想打一個自動完成字段，其中如果鍵入一個「@」，它們被提供一個自動完成的名稱列表。

我正在使用jQueryUI自動完成，唯一的問題與我的解決方案（http://jsfiddle.net/aUfrz/22/）是自動完成的文本輸入需要放置在textarea光標位置的頂部，而不是正確的，因爲它目前站。

這裏是我的JS這是在的jsfiddle：

$(document.body).on('keypress', 'textarea', function(e) { 
    var names = [ 
     "johnny", 
     "susie", 
     "bobby", 
     "seth" 
    ], 
    $this=$(this), 
    char = String.fromCharCode(e.which); 

    if(char == '@') { 
     console.log('@ sign pressed'); 
     var input=$('<input style="position:relative; top:0px; left:0px;background:none;border:1px solid red" id="atSign" >'); 
     $this.parent().append(input); 
     input.focus(); 
     input.autocomplete({ 
     source: names, 
     select: function (event, ui) { 
      console.log('value selected'+ui.item.value); 
      //$this.val('@'+ui.item.value); 
      $this.insertAtCaret(ui.item.value); 
      $this.focus(); 
      input.remove(); 
     } //select 
    }); //autocomplete 
    } //if 
}); // keypress 

HTML：

<textarea></textarea>​ 

請注意，我這裏沒有顯示一個jQuery插件，我用插入選定的自動完成建議在插入位置：insertAtCaret()，我在此找到other SO question。

Answer 1

沒有跨瀏覽器的方法來檢索文本區的插入位置的屏幕上的座標。

IE瀏覽器選擇對象，我相信你能得到的X/Y座標，將您自動完成輸入元素 - 但不會對其他任何瀏覽器中運行。

我從來沒有見過有自動完成小工具，與要輸入文字的內嵌出現一個文本區域部件 - 它只是不切合實際的實施，並不會在所有的瀏覽器。

您可能可以創建一個使用內容可編輯標誌使用iframe的自定義富文本編輯器 - 但要確保它看起來像普通文本區域會很困難（因爲複製粘貼將會粘貼格式，這可能是你不想要的）。

定位自動完成框旁邊的文本區域（在一定的一面，也許下面嗎？）好像在這裏你最好的選擇。