如何在textarea的當前插入符的位置顯示div？

我見過這樣的幾個問題，但找不到解決方案。我有一個文本框。當用戶一直打字時，如果他們按@，我想顯示他們可以從中選擇的項目列表，在該插入符號的位置（即文本框中輸入下一個字符的位置，而不是鼠標光標的位置）。如何在textarea的當前插入符的位置顯示div？

的jsfiddle：http://jsfiddle.net/LR8pe/

代碼：

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

我有基本的力學下來，但顯示/插入符號的位置隱藏就是我卡住了。

我正在使用jquery/knockout，但純JS對我來說沒問題。

來源

2013-11-25 SB2055

看看這個帖子http://stackoverflow.com/questions/19755633/detect-when-cursor-position-inside-input-change-in-jquery –

「獲取光標在textarea中的x/y位置」提示噸的答案... – epascarello

@epascarello我點擊了很多。如果你看到一個幫助我使用textarea而沒有其他第三方庫的人，我很樂意閱讀它。 – SB2055

-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的大小是固定的，那麼位置您的名單在底部：

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之下產卵。

來源

2013-11-26 00:06:05 teh1

這不是我要求的，儘管我很欣賞你的時間。我需要光標位置，而不是固定的位置。 – SB2055

-1

使用您的jsfiddle：http://jsfiddle.net/zCLu9/1/

基本上，我創建了2個負責握着鼠標的X全局變量和Y座標被更新鼠標移動所以他們總是（當然，幾乎總是）準確。然後，這些座標用於設置.list元素應該顯示的偏移量。

我還將元素的位置設置爲CSS中的絕對位置。

來源

2013-11-26 00:06:51

Doh，我在想OP的意思是鼠標光標。 * smh * –

我認爲他/她在文本區內的打字遊標的位置之後，而不是鼠標指針。 – Shai

再次，不是我所要求的。謝謝你嘗試。 – SB2055

如何在textarea的當前插入符的位置顯示div？

回答

相關問題