Javascript獲取輸入文字或文本區域中插入符號的絕對位置（以像素為單位）

Question

我正在嘗試開發一種自動完成功能，該功能實際上會將其自身定位在輸入文本和/或textarea中的插入符號位置下方，而不是僅位於元素下方。 有點像大多數IDE。

我目前正在使用Twitter Bootstrap typea，並且正在尋求對其進行修改。 如果您有想法，我准備了一個JS BIN： http : //jsbin.com/welcome/34949/edit使用基本語法：

var autocomplete_values=["hello","dude","rubber","ducky"];

      $(".autocomplete").typeahead({
        source:autocomplete_values
      });

問題如何獲得輸入文本和/或文本區域中插入符號的絕對位置？

我完全不知道從哪里開始。 在此先感謝您的幫助。

Answer 1

我將創建一個隱藏的inline-block元素，其內容與文本框的內容相同。

偽：

myTextBox.onkeyup = function(){
    myInlineContainer.innerHTML = this.value
}

一旦完成該工作，您只需進行一些測量和一些數學運算即可將智能感知彈出框准確定位在文本框上所需的位置。

例如，您可以通過用輸入元素的寬度修改行內元素的寬度來獲取智能感知框的offsetleft：

intellisenceLeft = (myInlineContainer.offsetWidth % myTextBox.offsetWidth);

獲得最高職位可能要困難一些，但是沒有什么可以解決的。

Answer 2

使用絕對定位和虛擬元素，您可以非常准確地完成此操作。

我解決此問題的方法是讓一個虛擬（不可見）內聯元素包含輸入的當前值。 確保此元素具有完全相同的字體設置，我們可以輕松地測量其寬度，然后將其用於抵消自動完成值。

輸入字段和自動完成元素都絕對位於相對放置的容器中，因此它們重疊。 我給自動完成功能提供了一個比輸入字段低的z索引，並使輸入背景透明，因此自動完成功能不會干擾單擊輸入字段。

我使用text-indent將自動完成文本放置在右側，但是您也可以使用left屬性實際移動元素。

HTML

<div id="container">
    <input type="text" id="foo">
    <div id="ac"></div>
    <span id="dummy"></span>
</div>

CSS

#container { position: relative; }

#foo, #ac, #dummy {
    font-family: monospace;
    font-size: 16px;
}

#foo, #ac {
    position: absolute;
    top: 0;
    left: 0;
}

#foo {
    z-index: 2;
    border: solid 1px black;   
    background: transparent;
}

#ac {   
    top: 1px;
    left: 2px;
    z-index: 1;
    color: #999;
}

#dummy { visibility: hidden; }

JavaScript的

（使用jQuery，但應該很重要）

$('#foo').keyup(function(event) {
    //get autocomplete value
    var autoComplete = dummyAutoComplete($(this).val());

    //if a value is found, show it in #ac and adjust position
    if (autoComplete !== null) {
        //add in value and make visible
        $('#ac').html(autoComplete).removeClass('hidden');

        //dummy gets the same value as the input, to measure its width          
        $('#dummy').html($(this).val());

        //add autocomplete text-indent based on dummy width + some adjustmet
        $('#ac').css('text-indent', $('#dummy').outerWidth() + 'px');       
    } else {
        //hide autocomplete                
        $('#ac').html('').addClass('hidden');
    }
);

我有一個在jsfiddle上運行的示例 。