{"id":22487163,"url":"https://github.com/component/textarea-caret-position","last_synced_at":"2025-05-14T20:06:52.064Z","repository":{"id":14082665,"uuid":"16786409","full_name":"component/textarea-caret-position","owner":"component","description":"xy coordinates of a textarea or input's caret","archived":false,"fork":false,"pushed_at":"2023-03-20T08:13:20.000Z","size":580,"stargazers_count":596,"open_issues_count":25,"forks_count":81,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-04-14T22:09:57.625Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://jsfiddle.net/dandv/aFPA7","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/component.png","metadata":{"files":{"readme":"README.md","changelog":"HISTORY.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2014-02-13T00:03:09.000Z","updated_at":"2025-04-03T01:02:46.000Z","dependencies_parsed_at":"2022-07-15T15:17:31.993Z","dependency_job_id":"3e09bb73-1837-4599-a028-3377d70f8fd2","html_url":"https://github.com/component/textarea-caret-position","commit_stats":{"total_commits":42,"total_committers":11,"mean_commits":"3.8181818181818183","dds":0.6190476190476191,"last_synced_commit":"b5845a4c39cf094b56925183c086f92c8f8fec68"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/component%2Ftextarea-caret-position","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/component%2Ftextarea-caret-position/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/component%2Ftextarea-caret-position/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/component%2Ftextarea-caret-position/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/component","download_url":"https://codeload.github.com/component/textarea-caret-position/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248968914,"owners_count":21191162,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-06T17:16:00.629Z","updated_at":"2025-04-14T22:10:07.191Z","avatar_url":"https://github.com/component.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Textarea Caret Position\n\nGet the `top` and `left` coordinates of the caret in a `\u003ctextarea\u003e` or\n`\u003cinput type=\"text\"\u003e`, in pixels. Useful for textarea autocompletes like\nGitHub or Twitter, or for single-line autocompletes like the name drop-down\nin Twitter or Facebook's search or the company dropdown on Google Finance.\n\nHow it's done: a faux `\u003cdiv\u003e` is created off-screen and styled exactly like the\n`textarea` or `input`. Then, the text of the element up to the caret is copied\ninto the `div` and a `\u003cspan\u003e` is inserted right after it. Then, the text content\nof the span is set to the remainder of the text in the `\u003ctextarea\u003e`, in order to\nfaithfully reproduce the wrapping in the faux `div` (because wrapping can push\nthe currently typed word onto the next line). The same is done for the\n`input` to simplify the code, though it makes no difference. Finally, the span's\noffset within the `textarea` or `input` is returned.\n\n\n## Demo\n\nCheck out the [JSFiddle](http://jsfiddle.net/dandv/aFPA7/)\nor the [test.html](http://rawgit.com/component/textarea-caret-position/master/test/index.html).\n\n\n## Features\n\n* supports `\u003ctextarea\u003e`s and `\u003cinput type=\"text\"\u003e` elements\n* pixel precision with any combination of paddings, margins, borders, heights vs. line-heights etc.\n* keyboard, mouse support and touch support\n* no dependencies whatsoever\n* browser compatibility: Chrome, Safari, Firefox (despite [two](https://bugzilla.mozilla.org/show_bug.cgi?id=753662) [bugs](https://bugzilla.mozilla.org/show_bug.cgi?id=984275) it has), Opera, IE9+\n* supports any font family and size, as well as text-transforms\n* not confused by horizontal or vertical scrollbars in the textarea\n* supports hard returns, tabs (except on IE) and consecutive spaces in the text\n* correct position on lines longer than the columns in the text area\n* [no problem](https://archive.is/wXqud#13402035) getting the correct position when the input text is scrolled (i.e. the first visible character is no longer the first in the text)\n* no [\"ghost\" position in the empty space](https://github.com/component/textarea-caret-position/blob/06d2197f85f96405b43724e56dc56f220c0092a5/test/position_off_after_wrapping_with_whitespace_before_EOL.gif) at the end of a line when wrapping long words in a `\u003ctextarea\u003e`\n* RTL (right-to-left) support\n\n\n## Example\n\n```js\nvar getCaretCoordinates = require('textarea-caret');\n\ndocument.querySelector('textarea').addEventListener('input', function () {\n  var caret = getCaretCoordinates(this, this.selectionEnd);\n  console.log('(top, left, height) = (%s, %s, %s)', caret.top, caret.left, caret.height);\n})\n```\n\n\n## API\n\n### getCaretCoordinates(element, position)\n\n* `element` is the DOM element, either an `\u003cinput type=\"text\"\u003e` or `textarea`\n\n* `position` is an integer indicating the location of the caret. Most often you'll want to pass `this.selectionStart` or `this.selectionEnd`. This way, the library isn't opinionated about what the caret is.\n\nThe function returns a caret coordinates object of the form `{top: , left: , height: }`, where:\n* `top` and `left` 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\n* `height` is the height of the caret - useful to calculate the bottom of the caret.\n\n\n## Known issues\n\n* Off-by-one edge cases with spaces at the end of lines in `\u003ctextarea\u003e`s ([#29](https://github.com/component/textarea-caret-position/issues/9#issuecomment-303601894)). This may be a bug in how browsers render the caret.\n* Edge case with selecting from right to left strings longer than the `\u003cinput\u003e` ([#40](https://github.com/component/textarea-caret-position/issues/40)). The caret position can be quite off in this case.\n* Tab characters in `\u003ctextarea\u003e`s aren't supported in IE9 ([#14](https://github.com/component/textarea-caret-position/issues/14))\n\n\n## Dependencies\n\nNone.\n\n\n## TODO\n\n* Add tests.\n* Consider adding [IE-specific](http://geekswithblogs.net/svanvliet/archive/2005/03/24/textarea-cursor-position-with-javascript.aspx) [code](http://stackoverflow.com/questions/16212871/get-the-offset-position-of-the-caret-in-a-textarea-in-pixels) if it avoids the necessity of creating the mirror div and might fix [#14](https://github.com/component/textarea-caret-position/issues/14).\n* ~~Test IE8 support with `currentStyle`~~.\n\n\n## Implementation notes\n\nFor the same textarea of 25 rows and 40 columns, Chrome 33, Firefox 27 and IE9 returned completely different values\nfor `computed.width`, `textarea.offsetWidth`, and `textarea.clientWidth`. Here, `computed` is `getComputedStyle(textarea)`:\n\nChrome 33\n* `computed.width `: \"240px\" = the text itself, no borders, no padding, no scrollbars\n* `textarea.clientWidth`: 280 = computed.width + padding-left + padding-right\n* `textarea.offsetWidth`: 327 = clientWidth + scrollbar (15px) + border-left + border-right\n\nIE 9: scrollbar looks 16px, the text itself in the text area is 224px wide\n* `computed.width`: \"241.37px\" = text only + sub-pixel scrollbar? (1.37px)\n* `textarea.clientWidth`: 264\n* `textarea.offsetWidth`: 313\n\nFirefox 27\n* `computed.width`: \"265.667px\"\n* `textarea.clientWidth`: 249 - the only browser where textarea.clientWidth \u003c computed.width\n* `textarea.offsetWidth`: 338\n\n\n## Contributors\n\n* Dan Dascalescu ([dandv](https://github.com/dandv))\n* Jonathan Ong ([jonathanong](https://github.com/jonathanong))\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcomponent%2Ftextarea-caret-position","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcomponent%2Ftextarea-caret-position","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcomponent%2Ftextarea-caret-position/lists"}