javascript - 将文本输入定位在文本区域的光标位置之上(javascript，文本区域自动完成)

Question

我想做一个自动完成，如果有人输入“@”，他们会得到一个自动完成的名字列表。

我正在使用 jQueryUI 自动完成功能，我的解决方案 ( http://jsfiddle.net/aUfrz/22/ ) 的唯一问题是需要将可自动完成的文本输入放置在文本区域光标位置的顶部，而不是当前位置的右侧。

这是我在 JSFiddle 中的 JS:

$(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

获取插入符位置的一种方法是将每个字符的像素宽度乘以插入符的字符偏移量。 Here是一个有点粗糙的例子来证明。 textarea 的 x 偏移量计算如下:

e.target.value.length*13

编辑:Here是一个大大改进的版本。一个重要的发现是，在单字字体中，宽度和高度之间的比例是 8/13。

在下面的屏幕截图中，您可以看到当我按@时，输入出现在插入符位置。

这是 Chrome 中的屏幕截图，显示了相同的行为