20

I'd like to display a dropdown list in a <textarea> to assist the user in typing certain things. You know this from current IDEs as code completion. As you start typing something, a popup will appear right a the current cursor/caret location and you can navigate it using arrow keys to complete your text input.

I know how to get the cursor position in the text string (i.e. the character index of the cursor position) but I do not know how to get the X/Y coordinates (something like offsetWidth and offsetHeight) of the cursor inside the <textarea> element so that I can position my list element there. Is that possible in HTML/JavaScript, and how would it work?

General Grievance
  • 4,259
  • 21
  • 28
  • 43
ygoe
  • 16,668
  • 21
  • 98
  • 190
  • 3
    If you know the number of characters, and the width of the box, can you guess the position based on the average character width/line height? – Ben Williams Aug 05 '11 at 09:08
  • I've read the proposed other question, but I don't consider its answer a solution to the problem. Also, it's 3 years old and browsers and standards have advanced meanwhile. I'm not afraid of requiring a current browser for this to work. – ygoe Aug 06 '11 at 09:56
  • @BenWilliams: You can guess the line height, but not really the width. You could, however, grab the text, create an element with that text, and measure the width of the element. As long as you didn't create a new element every time the keypress event is fired, it wouldn't be too bad. – callumacrae Aug 30 '12 at 10:01
  • Forgot to think about that, and it is too late to edit. Monospaced fonts! Yeah, that would work fine. +1. – callumacrae Aug 30 '12 at 10:11

1 Answers1

2

With an editable html input (in an iframe like CKeditor or Rich Text Editor or even better: jsfiddle) you could insert an empty span element at the caret position and get the position of that element to display your dropdown.

It might seem complex but I can't think of any other way to do this.

It has some extra possibilities when used for a code editor, you could color-code the text and format code like jsfiddle does, and maybe even build some kind of code-auto-complete for keywords etc.

Willem
  • 5,361
  • 2
  • 22
  • 43
  • 1
    The extra possibilities sound good, as does your interesting suggestion. But I'd want to make sure that the user cannot enter formatted text (like when copying from MS Word or other web pages) and all pasted text is reformatted to look like plain text and can be converted to such. – ygoe Aug 07 '11 at 20:56
  • That's possible, jsfiddle.net does just that. How exactly they do it I don't know. Try coding and pasting on that site for a moment, it might give you some ideas. (In FF ctrl+v doesn't work, but "right click - paste" does) – Willem Aug 08 '11 at 06:53
  • CKeditor can be downloaded and used as open-source, but jsfiddle seems to be a web application only, no download, no technical insights. Do you know how they did their stuff? – ygoe Aug 09 '11 at 08:32
  • They seem to intercept the paste command to format the code before, or just after it gets inserted. I guess it's a keyup handler or something, maybe with a small timeout to let the browser paste it and then change it. The function to format the code has to do many things, first remove all unwanted html (with a regex), then add indentation (optional), then add colors (add html elements). I think I could write something like that, but it would take many hours to code, and many more to get it to work in "other browsers". – Willem Aug 09 '11 at 10:10