Problem: We want to add a pop-up box to a TextArea control as a user is types a specific word or set of words into a TextArea control. The pop-up box should needs to be at the position of the cursor, but we don’t know the x & y position of the cursor.
Solution: With a little coercion and the TextLineMetrics class, we can approximate the x & y position of the cursor.
Example using a TextArea control with the id of myTextArea:
[as]
var textHeight:Number = myTextArea.textHeight;
var lineHeight:Number = myTextArea.getLineMetrics( 0 ).height;
var numLines:Number = Math.ceil( textHeight/lineHeight );
var currentLineMet:TextLineMetrics = myTextArea.getLineMetrics( numLines-1 );
var xPos:Number = currentLineMet.width + myTextArea.x;
var yPos:Number = textHeight + predict_ti.y – ( lineHeight * myTextArea.verticalScrollPosition );
[/as]
The TextLineMetrics class contains information about the text position and measurements of a line of text within a text field. All of the measurements are in pixels, so we are just aproximating the x & y position.
[View Sample]
[Download Source]
The problem with the above example is that it only works for the last character that you type into the TextArea. If we want to get the actual cursor position we’ll need to create a custom component using the a TextField.
Below is a link to a simple component that figures out an approximate x & y based on the index of the character 1 less than the current position of the carat within the TextField.
Thanks so much for sharing this John as I too am having the same problem! I've tried out your sample and I'm able to get a menu to appear if the user hits SPACE in the textarea. How did you address displaying the popUp? Did you use a menu object or some other component as the popUp? I'd be very interested in knowing what you did.
Honestly its been so long since I've look at that code I'll have to go play with it, but I'll check it out again and get back to you about what I find out. – John
John,
Thanks I appreciate it. I've had some luck displaying a pop up menu in the textarea right at the cursor position (thanks to you!) but I'm now having some trouble working with the events and getting it to do what I'd like it too. If its not much trouble, if you come across what you did please email me. Thanks again for making this post. Didn't think I was going to find anyone who was trying to do something similar.
Javier –
I took a quick peek at what we did for the pop up menu and we are just using a list control. We change its visibility and add/removing event listeners where appropriate.
We did have to do some data tracking to manage when the list showed so the user could dismiss the list box and keep typing – that was the only hic-up we really encountered though.