Textarea Caret Position Get the top and left coordinates of the caret in a </code> or <code><input type="text"></code>, in pixels. Useful for textarea autocompletes like GitHub or Twitter, or for single-line autocompletes like the name drop-down in Twitter or Facebook's search or the company dropdown on Google Finance.</p> <p dir="auto">How it's done: a faux <code><div></code> is created off-screen and styled exactly like the <code>textarea</code> or <code>input</code>. Then, the text of the element up to the caret is copied into the <code>div</code> and a <code><span></code> is inserted right after it. Then, the text content of the span is set to the remainder of the text in the <code><textarea></code>, in order to faithfully reproduce the wrapping in the faux <code>div</code> (because wrapping can push the currently typed word onto the next line). The same is done for the <code>input</code> to simplify the code, though it makes no difference. Finally, the span's offset within the <code>textarea</code> or <code>input</code> is returned.</p> <div dir="auto"><h2 tabindex="-1" dir="auto">Demo</h2></div> <p dir="auto">Check out the <a href="/jsfiddle.net/dandv/aFPA7/">JSFiddle</a> or the <a href="/rawgit.com/component/textarea-caret-position/master/test/index.html">test.html</a>.</p> <div dir="auto"><h2 tabindex="-1" dir="auto">Features</h2></div> <ul dir="auto"> <li>supports <code><textarea></code>s and <code><input type="text"></code> elements</li> <li>pixel precision with any combination of paddings, margins, borders, heights vs. line-heights etc.</li> <li>keyboard, mouse support and touch support</li> <li>no dependencies whatsoever</li> <li>browser compatibility: Chrome, Safari, Firefox (despite <a href="/bugzilla.mozilla.org/show_bug.cgi?id=753662">two</a> <a href="/bugzilla.mozilla.org/show_bug.cgi?id=984275">bugs</a> it has), Opera, IE9+</li> <li>supports any font family and size, as well as text-transforms</li> <li>not confused by horizontal or vertical scrollbars in the textarea</li> <li>supports hard returns, tabs (except on IE) and consecutive spaces in the text</li> <li>correct position on lines longer than the columns in the text area</li> <li><a href="/archive.is/wXqud#13402035">no problem</a> getting the correct position when the input text is scrolled (i.e. the first visible character is no longer the first in the text)</li> <li>no <a href="/github.com/component/textarea-caret-position/blob/06d2197f85f96405b43724e56dc56f220c0092a5/test/position_off_after_wrapping_with_whitespace_before_EOL.gif">"ghost" position in the empty space</a> at the end of a line when wrapping long words in a <code><textarea></code></li> <li>RTL (right-to-left) support</li> </ul> <div dir="auto"><h2 tabindex="-1" dir="auto">Example</h2></div> <div dir="auto"textarea-caret'); document.querySelector('textarea').addEventListener('input', function () { var caret = getCaretCoordinates(this, this.selectionEnd); console.log('(top, left, height) = (%s, %s, %s)', caret.top, caret.left, caret.height); })"><tt><span>var</span> <span>getCaretCoordinates</span> <span>=</span> <span>require</span><span>(</span><span>'textarea-caret'</span><span>)</span><span>;</span><br><br><span>document</span><span>.</span><span>querySelector</span><span>(</span><span>'textarea'</span><span>)</span><span>.</span><span>addEventListener</span><span>(</span><span>'input'</span><span>,</span> <span>function</span> <span>(</span><span>)</span> <span>{</span><br> <span>var</span> <span>caret</span> <span>=</span> <span>getCaretCoordinates</span><span>(</span><span>this</span><span>,</span> <span>this</span><span>.</span><span>selectionEnd</span><span>)</span><span>;</span><br> <span>console</span><span>.</span><span>log</span><span>(</span><span>'(top, left, height) = (%s, %s, %s)'</span><span>,</span> <span>caret</span><span>.</span><span>top</span><span>,</span> <span>caret</span><span>.</span><span>left</span><span>,</span> <span>caret</span><span>.</span><span>height</span><span>)</span><span>;</span><br><span>}</span><span>)</span></tt></div> <div dir="auto"><h2 tabindex="-1" dir="auto">API</h2></div> <div dir="auto"><h3 tabindex="-1" dir="auto">getCaretCoordinates(element, position)</h3></div> <ul dir="auto"> <li> <p dir="auto"><code>element</code> is the DOM element, either an <code><input type="text"></code> or <code>textarea</code></p> </li> <li> <p dir="auto"><code>position</code> is an integer indicating the location of the caret. Most often you'll want to pass <code>this.selectionStart</code> or <code>this.selectionEnd</code>. This way, the library isn't opinionated about what the caret is.</p> </li> </ul> <p dir="auto">The function returns a caret coordinates object of the form <code>{top: , left: , height: }</code>, where:</p> <ul dir="auto"> <li><code>top</code> and <code>left</code> are the offsets in pixels from the upper-left corner of the element and (or presumably the upper-right, but this hasn't been tested), and</li> <li><code>height</code> is the height of the caret - useful to calculate the bottom of the caret.</li> </ul> <div dir="auto"><h2 tabindex="-1" dir="auto">Known issues</h2></div> <ul dir="auto"> <li>Off-by-one edge cases with spaces at the end of lines in <code><textarea></code>s (<a href="/github.com/component/textarea-caret-position/issues/9#issuecomment-303601894">#29</a>). This may be a bug in how browsers render the caret.</li> <li>Edge case with selecting from right to left strings longer than the <code><input></code> (<a href="/github.com/component/textarea-caret-position/issues/40">#40</a>). The caret position can be quite off in this case.</li> <li>Tab characters in <code><textarea></code>s aren't supported in IE9 (<a href="/github.com/component/textarea-caret-position/issues/14">#14</a>)</li> </ul> <div dir="auto"><h2 tabindex="-1" dir="auto">Dependencies</h2></div> <p dir="auto">None.</p> <div dir="auto"><h2 tabindex="-1" dir="auto">TODO</h2></div> <ul dir="auto"> <li>Add tests.</li> <li>Consider adding <a href="/geekswithblogs.net/svanvliet/archive/2005/03/24/textarea-cursor-position-with-javascript.aspx">IE-specific</a> <a href="/stackoverflow.com/questions/16212871/get-the-offset-position-of-the-caret-in-a-textarea-in-pixels">code</a> if it avoids the necessity of creating the mirror div and might fix <a href="/github.com/component/textarea-caret-position/issues/14">#14</a>.</li> <li><del>Test IE8 support with <code>currentStyle</code></del>.</li> </ul> <div dir="auto"><h2 tabindex="-1" dir="auto">Implementation notes</h2></div> <p dir="auto">For the same textarea of 25 rows and 40 columns, Chrome 33, Firefox 27 and IE9 returned completely different values for <code>computed.width</code>, <code>textarea.offsetWidth</code>, and <code>textarea.clientWidth</code>. Here, <code>computed</code> is <code>getComputedStyle(textarea)</code>:</p> <p dir="auto">Chrome 33</p> <ul dir="auto"> <li><code>computed.width </code>: "240px" = the text itself, no borders, no padding, no scrollbars</li> <li><code>textarea.clientWidth</code>: 280 = computed.width + padding-left + padding-right</li> <li><code>textarea.offsetWidth</code>: 327 = clientWidth + scrollbar (15px) + border-left + border-right</li> </ul> <p dir="auto">IE 9: scrollbar looks 16px, the text itself in the text area is 224px wide</p> <ul dir="auto"> <li><code>computed.width</code>: "241.37px" = text only + sub-pixel scrollbar? (1.37px)</li> <li><code>textarea.clientWidth</code>: 264</li> <li><code>textarea.offsetWidth</code>: 313</li> </ul> <p dir="auto">Firefox 27</p> <ul dir="auto"> <li><code>computed.width</code>: "265.667px"</li> <li><code>textarea.clientWidth</code>: 249 - the only browser where textarea.clientWidth < computed.width</li> <li><code>textarea.offsetWidth</code>: 338</li> </ul> <div dir="auto"><h2 tabindex="-1" dir="auto">Contributors</h2></div> <ul dir="auto"> <li>Dan Dascalescu (<a href="/github.com/dandv">dandv</a>)</li> <li>Jonathan Ong (<a href="/github.com/jonathanong">jonathanong</a>)</li> </ul> </article></div></div></div></div></div></div></div><div><div></div><div><rails-partial> <div> <div> <div> <div> <h2>About</h2> <p> xy coordinates of a textarea or input's caret </p> <div> <span> <a href="/jsfiddle.net/dandv/aFPA7">jsfiddle.net/dandv/aFPA7</a> </span> </div> <h3>Resources</h3> <div> Readme </div> <h3>License</h3> <div> MIT license </div> <include-fragment src="/component/textarea-caret-position/hovercards/citation/sidebar_partial?tree_name=master"> <div data-show-on-forbidden-error hidden> <div> <div> <div> <h3> Uh oh! </h3> <p> <p>There was an error while loading. <a href="" aria-label="Please reload this page">Please reload this page</a>.</p> </p> </div> </div> </div> </div> </include-fragment> <div> <a href="/github.com/component/textarea-caret-position/activity"> <span>Activity</span></a> </div> <div> <a href="/github.com/component/textarea-caret-position/custom-properties"> <span>Custom properties</span></a> </div> <h3>Stars</h3> <div> <a href="/github.com/component/textarea-caret-position/stargazers"> <strong>616</strong> stars</a> </div> <h3>Watchers</h3> <div> <a href="/github.com/component/textarea-caret-position/watchers"> <strong>13</strong> watching</a> </div> <h3>Forks</h3> <div> <a href="/github.com/component/textarea-caret-position/forks"> <strong>80</strong> forks</a> </div> <div> <a href="/github.com/contact/report-content?content_url=https%3A%2F%2Fgithub.com%2Fcomponent%2Ftextarea-caret-position&report=component+%28user%29"> Report repository </a> </div> </div> </div> </div> <div> <div> <h2> <a href="/github.com/component/textarea-caret-position/releases">Releases <span title="3">3</span></a></h2> <a href="/github.com/component/textarea-caret-position/releases/tag/2.1.0"> <div> <div> <span>Meteor support</span> <span title="Label: Latest"> Latest </span> </div> <div><relative-time datetime="2014-05-03T07:47:00Z">May 3, 2014</relative-time></div> </div> </a> <div> <a href="/github.com/component/textarea-caret-position/releases">+ 2 releases</a></div> </div> </div> <div> <div> <include-fragment aria-busy="true" aria-label="Loading latest packages" src="/component/textarea-caret-position/packages_list?current_repository=textarea-caret-position"> <h2> <a href="/github.com/orgs/component/packages?repo_name=textarea-caret-position">Packages <span title="0" hidden="hidden">0</span></a></h2> <div> <div></div> <div> </div> </div> <div> <div></div> <div> </div> </div> <div> <div></div> <div> </div> </div> <div data-show-on-forbidden-error hidden> <div> <div> <div> <h3> Uh oh! </h3> <p> <p>There was an error while loading. <a href="" aria-label="Please reload this page">Please reload this page</a>.</p> </p> </div> </div> </div> </div> </include-fragment> </div> </div> <div hidden> <div> <include-fragment src="/component/textarea-caret-position/used_by_list" accept="text/fragment+html"> <div data-show-on-forbidden-error hidden> <div> <div> <div> <h3> Uh oh! </h3> <p> <p>There was an error while loading. <a href="" aria-label="Please reload this page">Please reload this page</a>.</p> </p> </div> </div> </div> </div> </include-fragment> </div> </div> <div> <div> <include-fragment aria-busy="true" aria-label="Loading contributors" src="/component/textarea-caret-position/contributors_list?current_repository=textarea-caret-position&deferred=true"> <h2> <a href="/github.com/component/textarea-caret-position/graphs/contributors">Contributors</a> </h2> <ul> <li> <div></div> </li> <li> <div></div> </li> <li> <div></div> </li> </ul> <div data-show-on-forbidden-error hidden> <div> <div> <div> <h3> Uh oh! </h3> <p> <p>There was an error while loading. <a href="" aria-label="Please reload this page">Please reload this page</a>.</p> </p> </div> </div> </div> </div> </include-fragment> </div> </div> <div> <div> <h2>Languages</h2> <div> <span> <span itemprop="keywords"></span> <span itemprop="keywords"></span> <span itemprop="keywords"></span> </span></div> <ul> <li> <a href="/github.com/component/textarea-caret-position/search?l=javascript"> <span>JavaScript</span> <span>48.7%</span> </a> </li> <li> <a href="/github.com/component/textarea-caret-position/search?l=html"> <span>HTML</span> <span>42.8%</span> </a> </li> <li> <a href="/github.com/component/textarea-caret-position/search?l=css"> <span>CSS</span> <span>8.5%</span> </a> </li> </ul> </div> </div> </div> </rails-partial></div><div></div></div></div></div></div></div></div></div></div></div></div><div id="find-result-marks-container"></div><button hidden=""></button><button hidden=""></button></div> <!-- --> <!-- --> </div> </react-app> </div> </turbo-frame> </main> </div> </div> <footer role="contentinfo" > <h2>Footer</h2> <div> <div> <a href="/github.com"> </a> <span> (c) 2026 GitHub, Inc. </span> </div> <nav aria-label="Footer"> <h3 id="sr-footer-heading">Footer navigation</h3> <ul aria-labelledby="sr-footer-heading"> <li> <a href="/docs.github.com/site-policy/github-terms/github-terms-of-service">Terms</a> </li> <li> <a href="/docs.github.com/site-policy/privacy-policies/github-privacy-statement">Privacy</a> </li> <li> <a href="/github.com/security">Security</a> </li> <li> <a href="/www.githubstatus.com/">Status</a> </li> <li> <a href="/github.community/">Community</a> </li> <li> <a href="/docs.github.com/">Docs</a> </li> <li> <a href="/support.github.com?tags=dotcom-footer">Contact</a> </li> <li > <cookie-consent-link> <button type="button" > Manage cookies </button> </cookie-consent-link> </li> <li> <cookie-consent-link> <button type="button" > Do not share my personal information </button> </cookie-consent-link> </li> </ul> </nav> </div> </footer> <ghcc-consent id="ghcc" ></ghcc-consent> <div id="ajax-error-message" hidden> <button type="button" aria-label="Dismiss error"> </button> You can't perform that action at this time. </div> <template id="site-details-dialog"> <details open> <summary role="button" aria-label="Close dialog"></summary> <details-dialog> <button type="button" aria-label="Close dialog" data-close-dialog> </button> <div></div> </details-dialog> </details> </template> <div> <div> </div> </div> <template id="snippet-clipboard-copy-button"> <div> <clipboard-copy aria-label="Copy"> </clipboard-copy> </div> </template> <template id="snippet-clipboard-copy-button-unpositioned"> <div> <clipboard-copy aria-label="Copy"> </clipboard-copy> </div> </template> </div> <div id="js-global-screen-reader-notice" aria-live="polite" aria-atomic="true" ></div> <div id="js-global-screen-reader-notice-assertive" aria-live="assertive" aria-atomic="true"></div> </span> </body> </html>