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.
Thanks Dan, I can see some other benefits for knowing the exact location of the cursor in the TextArea control. Great example!
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.
Cool……….
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.
Will it work offline ?????
@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.
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.
@Sameer, did you download the code from 'view source'? That should have everything there you need to do this from your PC while offline.
See stackoverflow.com/questions/5189309 for alternative approach for Flex 4.
Hi, I tried this but I can never get the _prevBmpData to be perfectly black. I always get a white halo around the old letters. Anyway I can fix that?
@Jas I’m guessing no. You’re dealing with some raw data there. I’m guessing that the halo is caused by the anti-aliasing of the text.
Hi,
thats a nice way to get the caret position. but somehow it is not working when i copy paste some text into textArea or append the text into textArea. can you please suggest the workaround.
Thanks in advance.
- Atul
I don’t think this will work in that instance. The way this is working is it takes a snapshot of the BitmapData every time the text changes. Then it looks for where the difference between the current BitmapData and the previous BitmapData. You are changing all of the text at once so the entire field is different.
One possible workaround that I can think of is that after you paste text in then delete the last character in the text and then add it back again so that the code can pick up a difference in the BitmapData.