{"_id":"textarea-caret","_rev":"11-c73b09c2fadfaead6768456a32c6f6b3","name":"textarea-caret","description":"(x, y) coordinates of the caret in a textarea or input type='text'","dist-tags":{"latest":"3.1.0"},"versions":{"3.0.0":{"name":"textarea-caret","repository":{"type":"git","url":"git+https://github.com/component/textarea-caret-position.git"},"version":"3.0.0","author":{"name":"Jonathan Ong","email":"me@jongleberry.com","url":"http://jongleberry.com"},"description":"latest version of component/textarea-caret-position","files":["index.js"],"license":"MIT","keywords":["textarea","caret","position"],"gitHead":"7a4e48e60595ec2ac2dad3bfc97ae7166ea0f321","bugs":{"url":"https://github.com/component/textarea-caret-position/issues"},"homepage":"https://github.com/component/textarea-caret-position#readme","_id":"textarea-caret@3.0.0","scripts":{},"_shasum":"7276cfc8a86f375a8f0fa87c04745a0070cd5ff1","_from":".","_npmVersion":"2.14.7","_nodeVersion":"4.2.3","_npmUser":{"name":"chemzqm","email":"chemzqm@gmail.com"},"dist":{"shasum":"7276cfc8a86f375a8f0fa87c04745a0070cd5ff1","tarball":"https://registry.npmjs.org/textarea-caret/-/textarea-caret-3.0.0.tgz","integrity":"sha512-Jds4m7N0eQyluRdSymSJapHd0nzveDsAmYlVn9MiJXAshu2RhEy68T0Hze3HnXS2SJts+mMhvW5OsoW7ICWovw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuI5nxkUV/SSas0VHc/napFT7K11AvqyO3PMoDfgN0/QIhAKuaBH820g86q6nDzHXzJZdMckDRzDwrYZ4tJMMmJfND"}]},"maintainers":[{"name":"chemzqm","email":"chemzqm@gmail.com"}],"directories":{}},"3.0.1":{"name":"textarea-caret","repository":{"type":"git","url":"git+https://github.com/component/textarea-caret-position.git"},"version":"3.0.1","author":{"name":"Jonathan Ong","email":"me@jongleberry.com","url":"http://jongleberry.com"},"description":"latest version of component/textarea-caret-position","files":["index.js"],"license":"MIT","keywords":["textarea","caret","position"],"gitHead":"a08864551387cc422c4f440c29044d6d17985ef3","bugs":{"url":"https://github.com/component/textarea-caret-position/issues"},"homepage":"https://github.com/component/textarea-caret-position#readme","_id":"textarea-caret@3.0.1","scripts":{},"_shasum":"05bbb7c2f183646ba99a1efd2813e0177b35e89c","_from":".","_npmVersion":"2.14.7","_nodeVersion":"4.2.3","_npmUser":{"name":"chemzqm","email":"chemzqm@gmail.com"},"dist":{"shasum":"05bbb7c2f183646ba99a1efd2813e0177b35e89c","tarball":"https://registry.npmjs.org/textarea-caret/-/textarea-caret-3.0.1.tgz","integrity":"sha512-a/7zbIqD9xohsCxzBePL4ZeMj95HY9aqYCI09suj/ZSAe9rsJ6GC0ZE5LP+H6HXrQ0wiZK6LiaR7I4WkV0rSkg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJGmuHNkLtmn66ymyW6uI7V2lc8JksTNWsf805z+ZKyQIgGD+Ginv1D0YnJMEc5aUGx/VpFpagJ0wD0x5m1DjDftc="}]},"maintainers":[{"name":"chemzqm","email":"chemzqm@gmail.com"}],"directories":{}},"3.0.2":{"name":"textarea-caret","repository":{"type":"git","url":"git+https://github.com/component/textarea-caret-position.git"},"version":"3.0.2","author":{"name":"Jonathan Ong","email":"me@jongleberry.com","url":"http://jongleberry.com"},"description":"latest version of component/textarea-caret-position","files":["index.js"],"license":"MIT","keywords":["textarea","caret","position"],"gitHead":"c7a4d61c724812e73d370245ab678948889e538f","bugs":{"url":"https://github.com/component/textarea-caret-position/issues"},"homepage":"https://github.com/component/textarea-caret-position#readme","_id":"textarea-caret@3.0.2","scripts":{},"_shasum":"f360c48699aa1abf718680a43a31a850665c2caf","_from":".","_npmVersion":"3.7.3","_nodeVersion":"5.9.1","_npmUser":{"name":"chemzqm","email":"chemzqm@gmail.com"},"dist":{"shasum":"f360c48699aa1abf718680a43a31a850665c2caf","tarball":"https://registry.npmjs.org/textarea-caret/-/textarea-caret-3.0.2.tgz","integrity":"sha512-gRzeti2YS4did7UJnPQ47wrjD+vp+CJIe9zbsu0bJ987d8QVLvLNG9757rqiQTIy4hGIeFauTTJt5Xkn51UkXg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFKjrMhQXEckc5KvTJbf9SGURqiR3XiUZieycZ+cj+wvAiAM7KW0Q+mSwpGFrW9UC4DS0GQ+7NfRQ16iBb/FEdGPvQ=="}]},"maintainers":[{"name":"chemzqm","email":"chemzqm@gmail.com"}],"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/textarea-caret-3.0.2.tgz_1474310720980_0.3534064805135131"},"directories":{}},"3.1.0":{"name":"textarea-caret","repository":{"type":"git","url":"git+https://github.com/component/textarea-caret-position.git"},"version":"3.1.0","authors":"Dan Dascalescu (@dandv), Jonathan Ong <me@jongleberry.com> (http://jongleberry.com)","description":"(x, y) coordinates of the caret in a textarea or input type='text'","files":["index.js"],"main":"index.js","license":"MIT","keywords":["textarea","caret","position"],"gitHead":"eddc6e29d8c03e25f96d133c12daa5539599f65b","bugs":{"url":"https://github.com/component/textarea-caret-position/issues"},"homepage":"https://github.com/component/textarea-caret-position#readme","_id":"textarea-caret@3.1.0","_npmVersion":"5.5.1","_nodeVersion":"7.2.0","_npmUser":{"name":"ashubham","email":"ashubham@gmail.com"},"dist":{"integrity":"sha512-cXAvzO9pP5CGa6NKx0WYHl+8CHKZs8byMkt3PCJBCmq2a34YA9pO1NrQET5pzeqnBjBdToF5No4rrmkDUgQC2Q==","shasum":"5d5a35bb035fd06b2ff0e25d5359e97f2655087f","tarball":"https://registry.npmjs.org/textarea-caret/-/textarea-caret-3.1.0.tgz","fileCount":5,"unpackedSize":11442,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEqXgICV4joXZvtp+OcNbBeTW5NlF7fKwYigfBA3HV/gAiEAr55Cc2cKd/07nHqs0n2o3vT47CTAknOPfrVB9smArqo="}]},"maintainers":[{"name":"ashubham","email":"ashubham@gmail.com"},{"name":"chemzqm","email":"chemzqm@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/textarea-caret_3.1.0_1519107063684_0.9100156763651701"},"_hasShrinkwrap":false}},"readme":"# Textarea Caret Position\n\nGet the `top` and `left` coordinates of the caret in a `<textarea>` or\n`<input type=\"text\">`, 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 `<div>` 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 `<span>` is inserted right after it. Then, the text content\nof the span is set to the remainder of the text in the `<textarea>`, 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 `<textarea>`s and `<input type=\"text\">` 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 `<textarea>`\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 `<input type=\"text\">` 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 `<textarea>`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 `<input>` ([#40](https://github.com/component/textarea-caret-position/issues/40)). The caret position can be quite off in this case.\n* Tab characters in `<textarea>`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 < 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","maintainers":[{"email":"chemzqm@gmail.com","name":"chemzqm"},{"email":"ddascalescu+npmjs@gmail.com","name":"dandv"},{"email":"ashubham@gmail.com","name":"ashubham"}],"time":{"modified":"2022-06-27T05:44:29.083Z","created":"2016-01-04T04:52:50.936Z","3.0.0":"2016-01-04T04:52:50.936Z","3.0.1":"2016-01-04T05:03:34.894Z","3.0.2":"2016-09-19T18:45:24.246Z","3.1.0":"2018-02-20T06:11:03.741Z"},"homepage":"https://github.com/component/textarea-caret-position#readme","keywords":["textarea","caret","position"],"repository":{"type":"git","url":"git+https://github.com/component/textarea-caret-position.git"},"bugs":{"url":"https://github.com/component/textarea-caret-position/issues"},"license":"MIT","readmeFilename":"README.md","users":{"kasperpeulen":true,"liximomo":true}}