<p>I am using jQuery and trying to find a cross browser way to get the pixel coordinates of the caret in <code>&lt;textarea&gt;</code>s and <code>input</code> boxes such that I can place an absolutely positioned div around this location.</p>

<p>Is there some jQuery plugin? Or JavaScript snippet to do just that?</p>

[{'answer_id': 29934, 'author': 'Cheekysoft', 'author_id': 1820, 'author_profile': 'https://Stackoverflow.com/users/1820', 'pm_score': 0, 'selected': False, 'text': '<p>Note: this answer describes how to get the <strong>character co-ordinates</strong> of the text-cursor/caret. To find the pixel-co-ordinates, you\'ll need to extend this further.</p>\n\n<p>The first thing to remember is that the cursor can be in three states</p>\n\n<ul>\n<li>a regular insertion cursor at a specific position</li>\n<li>a text selection that has a certain bounded area</li>\n<li>not active: textarea does not have focus. Has not been used.</li>\n</ul>\n\n<p>The IE model uses the Object <a href="http://msdn.microsoft.com/en-us/library/ms535869(VS.85).aspx" rel="nofollow noreferrer">document.selection</a>, from this we can get a <a href="http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx" rel="nofollow noreferrer">TextRange</a> object which gives us access to the selection and thus the cursor position(s).</p>\n\n<p>The FF model/Opera uses the handy variables [input].selectionStart and selectionEnd.</p>\n\n<p>Both models represent a regular ative cursor as a zero-width selection, with the left bound being the cursor position.</p>\n\n<p>If the input field does not have focus, you may find that neither is set.\nI have had good success with the following code to insert a piece of text at the current cursor location, also replacing the current selection, if present.\nDepending on the exact browser, YMMV.</p>\n\n<pre><code>function insertAtCursor(myField, myValue) {\n\n/* selecion model - ie */\nif (document.selection) {\n  myField.focus();\n  sel = document.selection.createRange();\n  sel.text = myValue;\n}\n\n/* field.selectionstart/end  firefox */ \nelse if (myField.selectionStart || myField.selectionStart == \'0\' ) {\n\n  var startPos = myField.selectionStart;\n  var endPos = myField.selectionEnd;\n  myField.value = myField.value.substring(0, startPos)\n    + myValue\n    + myField.value.substring(endPos, myField.value.length);\n\n  myField.selectionStart = startPos + myValue.length;\n  myField.selectionEnd = startPos + myValue.length;\n  myField.focus();\n} \n\n// cursor not active/present\nelse {\n  myField.value += myValue;\n}\n</code></pre>\n\n<p>Bug Note: links are not being correctly marked up in the top para.</p>\n\n<p>Selection object: <a href="http://msdn.microsoft.com/en-us/library/ms535869(VS.85).aspx" rel="nofollow noreferrer">http://msdn.microsoft.com/en-us/library/ms535869(VS.85).aspx</a><br>\nTextRange object: <a href="http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx" rel="nofollow noreferrer">http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx</a></p>\n'}, {'answer_id': 22446703, 'author': 'Dan Dascalescu', 'author_id': 1269037, 'author_profile': 'https://Stackoverflow.com/users/1269037', 'pm_score': 6, 'selected': True, 'text': '<p>I\'ve looked for a textarea caret coordinates plugin for <a href="https://github.com/mizzao/meteor-autocomplete" rel="noreferrer">meteor-autocomplete</a>, so I\'ve evaluated all the 8 plugins on GitHub. The winner is, by far, <a href="https://github.com/component/textarea-caret-position" rel="noreferrer">textarea-caret-position</a> from <strong>Component</strong>.</p>\n\n<h2>Features</h2>\n\n<ul>\n<li>pixel precision</li>\n<li>no dependencies whatsoever</li>\n<li>browser compatibility: Chrome, Safari, Firefox (despite <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=753662" rel="noreferrer">two</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=984275" rel="noreferrer">bugs</a> it has), IE9+; may work but not tested in Opera, IE8 or older</li>\n<li>supports any font family and size, as well as text-transforms</li>\n<li>the text area can have arbitrary padding or borders</li>\n<li>not confused by horizontal or vertical scrollbars in the textarea</li>\n<li>supports hard returns, tabs (except on IE) and consecutive spaces in the text</li>\n<li>correct position on lines longer than the columns in the text area</li>\n<li>no <a href="https://github.com/component/textarea-caret-position/blob/06d2197f85f96405b43724e56dc56f220c0092a5/test/position_off_after_wrapping_with_whitespace_before_EOL.gif" rel="noreferrer">"ghost" position in the empty space</a> at the end of a line when wrapping long words</li>\n</ul>\n\n<h3>Here\'s a demo - <a href="http://jsfiddle.net/dandv/aFPA7/" rel="noreferrer">http://jsfiddle.net/dandv/aFPA7/</a></h3>\n\n<p><img src="https://i.stack.imgur.com/LJiUS.png" alt="enter image description here"></p>\n\n<h2>How it works</h2>\n\n<p>A mirror <code>&lt;div&gt;</code> is created off-screen and styled exactly like the <code>&lt;textarea&gt;</code>. Then, the text of the textarea up to the caret is copied into the div and a <code>&lt;span&gt;</code> 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.</p>\n\n<p>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 <strong>@</strong> user dropdown.</p>\n'}]
['https://Stackoverflow.com/questions/29709', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/238/']