2

要素のすぐ下ではなく、入力テキストおよび/またはテキストエリアのキャレット位置の下に実際に配置するオートコンプリートを開発しようとしています。ほとんどの IDE に少し似ています。

現在、Twitter ブートストラップの先行入力を使用しており、それを変更しようとしています。アイデアがあれば、JS BIN を用意しました: http://jsbin.com/welcome/34949/edit 基本的な構文:

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

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

質問 入力テキストおよび/またはテキストエリア内のキャレットの絶対位置をピクセル単位で取得するにはどうすればよいですか?

どこから始めればよいかまったくわかりません。よろしくお願いします。

4

2 に答える 2

3

絶対配置とダミー要素を使用すると、これを非常に正確に行うことができます。

私がこれにアプローチした方法は、入力の現在の値を含むダミーの (目に見えない) インライン要素を持つことです。この要素のフォント設定がまったく同じであることを確認すると、その幅を簡単に測定でき、それを使用してオートコンプリート値をオフセットできます。

入力フィールドとオートコンプリート要素の両方が、相対的に配置されたコンテナーに絶対配置されているため、重複しています。オートコンプリートの z-index を入力フィールドよりも低くし、入力の背景を透明にして、オートコンプリートが入力フィールドのクリックを妨げないようにしました。

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 で実行する例があります。

于 2012-10-15T21:43:17.330 に答える
2

内容がテキストボックスの内容を反映する非表示のインラインブロック要素を作成します。

擬似：

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

それが機能したら、インテリセンス ポップアップ ボックスをテキスト ボックス上の必要な場所に正確に配置するには、いくつかの測定と計算が必要です。

たとえば、入力要素の幅でインライン要素の幅を変更することにより、intellisense ボックスの offsetleft を取得できます。

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

頂点に立つのは少し難しいかもしれませんが、ちょっとしたハッキン​​グで解決できるものは何もありません。

于 2012-10-15T20:22:39.267 に答える