How do I get the (x, y) pixel coordinates of the caret in text boxes?

by

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/

enter image description here

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.

More Related Contents:

  1. Get the size of the screen, current web page and browser window
  2. How to build PDF file from binary string returned from a web-service using javascript
  3. Cross-browser window resize event – JavaScript / jQuery
  4. Jquery load() only working in firefox?
  5. How can I hide select options with JavaScript? (Cross browser)
  6. How can I prevent the backspace key from navigating back?
  7. How can I make window.showmodaldialog work in chrome 37?
  8. Is there any problem with using HTML5’s “data-*” attributes for older browsers?
  9. Get the offset position of the caret in a textarea in pixels [duplicate]
  10. Proper way to detect WebGL support?
  11. Detecting an image 404 in Javascript
  12. How to display text in the browser status bar?
  13. Using image.complete to find if image is cached on chrome?
  14. Cross Browser Selection Range Library?
  15. How to hide css and js version details from weppalyzer in PHP
  16. How do I prevent a parent’s onclick event from firing when a child anchor is clicked?
  17. How to reload current page without losing any form data?
  18. How can I export tables to Excel from a webpage [closed]
  19. Mobile Safari: Javascript focus() method on inputfield only works with click?
  20. Watch for object properties changes in JavaScript [duplicate]
  21. jQuery UI Tabs – How to Get Currently Selected Tab Index
  22. Get translate3d values of a div?
  23. How to get the html of a div on another page with jQuery ajax?
  24. Detect if an alert or confirm is displayed on a page
  25. jQuery Standards and Best Practice [closed]
  26. How do I refresh a DIV content?
  27. showing progressbar progress with ajax request
  28. Trigger events when the window is scrolled to certain positions
  29. Get content of span
  30. creating highchart with ajax json data

Leave a Comment