Как показать div в позиции текущего каретки в текстовом поле?

Question

Я видел несколько таких вопросов, но не могу найти решение. У меня есть текстовое поле. Когда пользователь вводит текст, если они нажимают @, я хотел бы показать список элементов, которые они могут выбрать, в этой позиции каретки (т. Е. Место в текстовом поле, где будет отображаться следующий символ, не расположение курсора мыши).

JSfiddle: http://jsfiddle.net/LR8pe/

Код:

$(".textarea").bind("keypress", function (e) { 
    if (String.fromCharCode(e.keyCode) == '@') { 
     $(".list").show(); 
    } else{ 
     $(".list").hide(); 
    } 
}); 

У меня есть основы механики вниз, но показ/скрытие в положении каретки где я застрял.

Я использую jquery/нокаут, но чистый JS в порядке со мной.

Answer 1

Вот чисто CSS подход:

http://jsfiddle.net/p774G/2/

Объемного текстовое поле и список в контейнере:

<div class="spacer"></div> 
<div class="list-container"> 
    <textarea class="textarea"></textarea> 
    <ul class="list"> 
     <li>item</li> 
    </ul> 
</div> 

Измените CSS так, чтобы текстовое поле имеет фиксированный размер, то положение ваш список внизу:

textarea 
{ 
    width: 300px; 
    height: 70px; 
    padding: 3px; 
} 

.list { 
    list-style: none; 
    background-color: gray; 
    display: none; 

    position: absolute; 
    top: 76px; 
    left: 0; 

    margin: 0; 
    padding: 0; 
    border: 0; 
} 

.list-container 
{ 
    position: relative; 
} 

.list li 
{ 
    padding: 5px; 
    width: 294px; 
} 

ED IT:

Я бы не рекомендовал порождать этот ящик, в котором находится указатель мыши, так как вы не знаете, где у пользователя будет его или ее курсор. Это может быть страница со всем, что вы знаете. Это плохой опыт работы с пользователями. Вместо этого создайте его ниже textarea, как и в моем ответе.

Answer 2

Использование jsFiddle: http://jsfiddle.net/zCLu9/1/

В принципе, я создал 2 глобальные переменные, ответственные за проведение X мышки и Y координаты, которые обновляются на MouseMove, чтобы они всегда (ну, почти всегда) точны. Затем эти координаты используются для установки смещения элемента .list всякий раз, когда он должен отображаться.

Я также установил абсолютное положение элемента в CSS.