3

I'm trying to find away to accurately determine the location of text within a textarea or input HTML element similar to the way GitHub has managed to achieve it with their inline dropdowns (which is also a textarea), but I'm completely stumped at how I might be able to achieve this.

Ideally looking to achieve something that will return a DOMRect object similar to the Range.getBoundingClientRect() method, as I will need the x and y coordinates of the matched text as well as the width and height in order to position the dropdown I want to have in my project.

Using this for a chrome extension I'm working on that will need to be able to run on any input and textarea in order to show a dropdown directly below a '/' character when it is entered. Otherwise I would just be using a div with contenteditable="true" to achieve this.

Any ideas would be greatly appreciated!

enter image description here

WabiSabi
  • 51
  • 4
  • 1
    It looks like you can use ranges: https://stackoverflow.com/a/50273718/ – Nate Levin Aug 22 '20 at 15:42
  • 3
    Unfortunately like the Range API this doesn't seem to be working on any input or textarea elements, the DomRect just has 0 as every value when I'm focusing/selecting within them. :/ – WabiSabi Aug 22 '20 at 16:29

1 Answers1

0

I found this text-area-caret repo on GitHub that looks like it should be able to achieve what I want with some small tweaks (will report back with necessary tweaks if there are any, or if it doesn't achieve what I want).

WabiSabi
  • 51
  • 4