Subscribe to RSS
get email updates
home | about | pixDif AIR app | video tutorials
polyGeek.com

Register for 360Flex in DC using the ad below and you will automatically be entered in a drawing for a free ticket. Read more.
place your ad here

Web Premium





Tracking the x/y position of the cursor in a TextArea

April 21st, 2009 . by polygeek

Suppose you wanted to track the position of the cursor in a TextArea. You might need to do this if you wanted to provide some contextual information to the user. And if you do so you want to position the message very near to where the user is typing.

The TextArea provides a lot of information and some of it can be used to approximate the location of the cursor but it isn’t precise.  But I did happen upon an idea that gets the position of the last typed character very accurately. Check it out below:

view source

You should be able to see the red dot follow the cursor around. I’m doing this by checking the BitmapData of the TextArea every time the text changes. I then combine that with the BitmapData from the previous change in text and apply a Difference blend mode. You can see that in the black box at the bottom. What is different each time is the last character.

Now I can use the getColorBoundsRect method on the BitmapData to find the x/y coordinates of the last character. Actually, I have to mix in a little threshold magic because the blending doesn’t produce exactly white pixels and the getColorBoundsRect is very picky. You can check out the source code for a full explaination.

If something here has proved valuable to you then feel free to drop a couple of bucks in the tip-jar.

Post to Twitter Post to Delicious Post to Facebook Post to Reddit Post to StumbleUpon


similar posts

8 Responses to “Tracking the x/y position of the cursor in a TextArea”


comment number 1 by: Mister

Thanks Dan, I can see some other benefits for knowing the exact location of the cursor in the TextArea control. Great example!

comment number 2 by: polyGeek

You know, if this problem had come up a few weeks ago I never would have thought about this approach. But I've been working with BitmapData and the Difference blend mode a lot these past few weeks. So it was ripe for the picking.

comment number 3 by: John Ruusu

Cool……….

comment number 4 by: sameer

I am working on a project in which i require coordinates in textarea on javascript. Can you tell me how i will be able to use your code in it.

comment number 5 by: sameer

Will it work offline ?????

comment number 6 by: polyGeek

@sameer, This only works in Flash. I have no idea if it's possible in Javascript – I wouldn't bet on it myself. Now if you are using the Flash then it's no problem to communicate the data to Javascript via the External.Interface. And yes, it would work offline.

comment number 7 by: sameer

Hi,

Thanks for replying. Its not working offline while loading it for first time. I have copied the code fron this page of <object>. It is only working when the whole http: path of the swf file is given. If I have saving the swf file and then providing it's path locally in the value attribute of <param> then it is not working.

comment number 8 by: polyGeek

@Sameer, did you download the code from 'view source'? That should have everything there you need to do this from your PC while offline.

   Welcome back (Change)

Leave a Reply

comment feed RSS   subscribe to this comment thread

Recent Posts

   



polyGeek.com

© Copyright 2008 polyGeek.com / Dan Florio, All Rights Reserved Except Where Explicitly Stated
Web Developement Blogs - Blog Catalog Blog Directory
M2 Websites
Local Directory for Los Angeles, CA

Better Tag Cloud