Get caret XY coordinates in text area [duplicate]

问题

Is there any good JQuery/JS solution to get the absolute position of a caret in text area (given in X/Y coordinates OR top/left coordinates).
The native Event object of keyDown JQuery function gives the x/y coordinates of the cursor and I want something similar the works on the working caret.

My goal is to add a floating HTML element the will be positioned relatively to the working caret position so I need to somehow get its position.

I need the solution to work on TextArea elements but a general solution to any editable html element would be even better!

回答1:

This jQuery plugin is what you're looking for!

回答2:

may be you want replace <textarea> with <div contenteditable="true">, it has almost the same behavior, and you can get coordinates by conventional way.

回答3:

I've looked for a textarea caret coordinates plugin for meteor-autocomplete, so I've evaluated all the 8 plugins on GitHub. The winner is, by far, textarea-caret-position from Component.

Features

pixel precision
no dependencies whatsoever
browser compatibility: Chrome, Safari, Firefox (despite two bugs it has), IE9+; may work but not tested in Opera, IE8 or older
supports any font family and size, as well as text-transforms
the text area can have arbitrary padding or borders
not confused by horizontal or vertical scrollbars in the textarea
supports hard returns, tabs (except on IE) and consecutive spaces in the text
correct position on lines longer than the columns in the text area
no "ghost" position in the empty space at the end of a line when wrapping long words

Here's a demo - http://jsfiddle.net/dandv/aFPA7/

How it works

A mirror <div> is created off-screen and styled exactly like the <textarea>. Then, the text of the textarea up to the caret is copied into the div and a <span> is inserted right after it. Then, the text content of the span is set to the remainder of the text in the textarea, in order to faithfully reproduce the wrapping in the faux div.

This is the only method guaranteed to handle all the edge cases pertaining to wrapping long lines. It's also used by GitHub to determine the position of its @ user dropdown.

回答4:

http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea/

this guy was on same mindset as u :)

$('textarea').click(function (e){
    var   x =  e.pageX;
    var   y =  e.pageY;
    //int of top position
    //remember u need absolute position to calculate parents,grandparents to find true                    
    // position from body tag to whereever textarea might be (html) wise
    var tx = parseInt($(this).css('left'));
    var ty = parseInt($(this).css('top')); 
    var fx = x-tx; //final x
    var fy = y-ty; // final y
    console.log('X=> '+fx);
    console.log('Y=>'+fy);
});

NOTE: I might have mixed up the x and y axes with top and left because I'm dyslexic and find it difficult to remember such simple tax :)

I think that might give you the page coordinates, so with that in mind take away the textarea's (absolute) offeseTop, and Left from x and y then there u have it :) .

来源：https://stackoverflow.com/questions/5082921/get-caret-xy-coordinates-in-text-area

标签

javascript

jquery

html

textarea

caret