Float a div on a textarea?

Question

enter image description here

I have a div which has this list of suggestions. But i need to allocate it at the caret position of the textarea. Is this possible if yes, help me to do it.

function findOffsetPosition(obj) {
    var posX = obj.clientLeft; var posY = obj.clientTop;
    while (obj.offsetParent) {
        if (obj == document.getElementsByTagName('body')[0]) { break }
        else {
            posX = posX + obj.offsetParent.offsetLeft;
            posY = posY + obj.offsetParent.offsetTop;
            obj = obj.offsetParent;
        }
    }
    var posArray = [posX, posY]
    return posArray;
}

I don't think this possible. I think it's a cool idea, but it's not possible. The problem is many factors about the textarea that you can't retrieve. Of course, you can get the textarea's actual position on the page...that's easy. You can also get a pretty accurate idea of the position of the cursor (caret) in the text. But you are not able to get the physical position of the cursor. — Ian, Oct 17 '12 at 04:56
If you want something like this, you may need something like Facebook's tagging, where you type in `@` and begin typing a name. In their case, a "dropdown" menu appears right below the textarea with suggestions. Instead of directly where you are typing, it's right below it, and is probably as good as you can get with this. — Ian, Oct 17 '12 at 04:57
@ianpgal In facebook suggestions are shows up at the bottom of textbox not at text area. My concern is as my control is a text area user has to scroll down and check the matches. — Pradeep, Oct 17 '12 at 05:02
It doesn't matter about facebook - they use both textareas and textboxes, it's no difference (I understand textareas are multi-line and are technically bigger). But that's something you'll have to deal with. I really don't think it's possibly, in a reliable manner at all, to get the caret's physical position. — Ian, Oct 17 '12 at 05:13
@Ian: yes, it's possible. Here's how [the *component* plugin](http://stackoverflow.com/a/22446703/1269037) does it. — Dan Dascalescu, Mar 17 '14 at 19:01
@DanDascalescu Pretty awesome. I like to think that when I originally commented, it wasn't as "possible" or as fully developed and I made more sense. Clearly that's no longer true! — Ian, Mar 17 '14 at 19:17

score -3 · Answer 1 · edited May 23 '17 at 12:27

-3

Here is a post that should get you started

https://stackoverflow.com/a/7745998/1354978

And the guy's jsfiddle works +1

http://jsfiddle.net/gilly3/6SUN8/

edited May 23 '17 at 12:27

Community

1
1

answered Oct 17 '12 at 04:59

earlonrails

4,966
3
32
47

But caret position doesn't help me to allocate a div. I need the physical location. – Pradeep Oct 17 '12 at 05:06
You could get the position of the textarea, and then add or subtract based on the caret position you boob. Also if you want to check the user's default text size to help compensate that could be done too. You are really just not trying I feel like. – earlonrails Oct 17 '12 at 18:09

Float a div on a textarea?

1 Answers1