Javascript获取输入文字或文本区域中插入符号的绝对位置（以像素为单位）

Question

I'm trying to develop an autocomplete that actually positions itself underneath the caret position in an input text and/or textarea instead of just underneath the element. A bit like most IDEs.

I'm currently using the Twitter bootstrap typeahead and I'm seeking to modify it. I prepared a JS BIN if you got an idea: http://jsbin.com/welcome/34949/edit With basic syntax:

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

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

Question How do I get the absolute position in pixels of a caret in an input text and/or a textarea?

I have absolutely no idea where to start. Thanks in advance for your help.

Answer 1

I would create a hidden inline-block element whose contents mirror that of the textbox.

Pseudo:

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

Once you've got that working, you're just aa few measurements and some math away from positioning your intellisense popup box exactly where you want it over your textbox.

For example, you could get the offsetleft for your intellisense box by modding your inline-element width by your input element's width:

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

Getting the top might be a little tougher, but nothing a little hacking at couldn't solve.

Answer 2

Using absolute positioning and a dummy element, you can accomplish this quite accurately.

The way I approached this is by having a dummy (invisible) inline element containing the current value of the input. Making sure that this element has the exact same font setup, we can easily measure its width, which we can then use to offset the auto-complete value.

Both the input field and the autocomplete element are absolutely positioned in a relatively positioned container, so they overlap. I gave the autocomplete a z-index lower than the input field and made the input's background transparent so auto-complete does not interfere with clicking the input field.

I used text-indent to get the autocomplete text positioned right, but you can also use the left property to actually move the element.

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

(using jQuery, but should get the point accross)

$('#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');
    }
);

I've got an example running on jsfiddle.