0

I've seen a few questions like this but can't find a solution. I have a textbox. When the user is typing along, if they press @, I'd like to show a list of items they can select from, at that caret's position (i.e. the place in the textbox where the next character typed will appear, not the location of the mouse cursor).

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

Code: 

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

I have the basic mechanics down, but showing/hiding at the position of the caret is where I'm stuck.

I'm using jquery/knockout, but pure JS is fine with me.

ebohlman
  • 14,795
  • 5
  • 33
  • 35
SB2055
  • 12,272
  • 32
  • 97
  • 202
  • check out this post http://stackoverflow.com/questions/19755633/detect-when-cursor-position-inside-input-change-in-jquery – Seth McClaine Nov 25 '13 at 23:52
  • "get x/y position of cursor in textarea" brings up tons of answers... – epascarello Nov 25 '13 at 23:52
  • @epascarello I've clicked through many. If you see one that helps me with a textarea and no other third-party libs, I'd love to read it. – SB2055 Nov 26 '13 at 00:03
  • And you have 2 third party libraries listed on your tags. – epascarello Nov 26 '13 at 00:05
  • Hmmm... Getting the index in characters is easy, with `selectionStart`, but getting the location of that in pixels, such that you could absolute position an element at the cursor, not sure if it's possible. – Robbie Wxyz Nov 26 '13 at 00:06
  • What you're talking about is technically called the "caret", not the "cursor". The latter is what most people call the "mouse pointer", not the position where characters are inserted while you're typing. Consider editing your question to make that clear so you don't continue getting answers for how to locate the mouse cursor. – ebohlman Nov 26 '13 at 01:42
  • 1
    You missed a couple references so I edited the question a bit for clarification. – ebohlman Nov 26 '13 at 01:55

2 Answers2

-1

Here is a purely CSS approach:

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

Surround your textarea and list in a container:

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

Modify your CSS so that the textarea is a fixed size, then position your list at the bottom of it:

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;
}

EDIT:

I would not recommend spawning this box where the mouse cursor is, as you do not know where the user will have his or her cursor. It could be off the page for all you know. This is a bad user experience. Instead spawn it below the textarea as I did in my answer.

flagoworld
  • 3,196
  • 2
  • 20
  • 16
  • This is not what I asked for, though I appreciate your time. I need cursor position, not fixed position. – SB2055 Nov 26 '13 at 00:12
-1

Using your jsFiddle: http://jsfiddle.net/zCLu9/1/

Basically, I created 2 global variables responsible for holding the mouse's X and Y coordinates which are updated on mousemove so they're always (well, almost always) accurate. Then those coordinates are used to set the offset of the .list element whenever it's supposed to be displayed.

I also set the element's position to absolute in the CSS.

Brian Poole
  • 701
  • 3
  • 11