View Full Version : Getting Cursor Position in a <textarea>

07-11-2005, 04:36 PM
Does anyone know if it is possible, using JavaScript to get the currrent position of the cursor in a textarea (by cursor I mean the blinking verticle pipe, as is where text will be inserted when one types the next key).
Thanks for all of your help.

07-11-2005, 04:42 PM
A while back I did a search and found a link to what seems to be an IE only solution....
Link (http://www.webxpertz.net/forums/showthread.php?threadid=14947)

07-11-2005, 06:23 PM
You can also look into the Gecko DOM Range object:

07-11-2005, 08:44 PM
So there is no 'true' cross browser solution (safari/mozilla/ie/opera) or a way to do it in all of them.
Hmm, ok well if I know the size of the font the surely there must be a way to work out the number of chars on the current line then times it by the point size in pixels and add it to the left offset of the textarea?

07-11-2005, 09:01 PM
You don't know the size of the font.
I can change that. I can have your CSS turned off.

There isn't much you can 100% rely on for every single browser in the world. Target which ones you want to support (I support all browsers that conform to W3C standards, personally) and you make assumptions that people will have javascript enabled and CSS on and so on.
You inform your users via an FAQ or some such what is needed to use your site to its fullest functionality if it's a commercial site. If it's your own, do what you want. ;)

Looking at other code that does similar things to what you want to do is often helpful. For example, the code right here in this site for the editor. It seems to know where my cursor is for both Firefox and MSIE...

07-11-2005, 11:34 PM
I can work out where the cursor is in relation to the rest of the text in the textarea however I want to know where it is in relation to the page (eg 250px from the left, as I am making an autocomplete system for a textarea and want the pop-up box to appera somewhere logical.

07-12-2005, 03:29 PM
Did you consider making the popup box appear smack dab in the middle of the screen?
That would be the easiest way to make it cross-browser, I would think.

Or...you could do the little trick of that other text editor and put a hidden control (iframe or whatever) right next to the textarea, then show it when you want the autocomplete going. It will always be right next to the textarea, so it's somewhat logical and even easier to make cross-browser, since you're basically just toggling visibility or display property/ies.

07-12-2005, 08:31 PM
I seem to have solved that problem. I have made the textarea have a z-index of -1 and a position of 0,0 (the page itself will be in an iframe). Now the whole point of this is that I am making an JavaScript text editor with highlighting etc, which is based off of Helene. One of Helenes problems was that the current line that was being typed on was a one-row textarea, meaning that the text only got highlighted when the user worked on a different line, quite annoying. So my idea is to have a semi-hidden textarea to grab the input and then format it in a div. But, I have a problem, I cant get the two to line up by this I mean that when they type something in the z-indexed textarea its value is currently just displayed in the first child node of the div, however the cursor shows through the divs white background so you can see where the next letter will go. But for it to work I need to match the font and margin of the textarea to the div so that the position of the cursor is just in-front of the later letter in the div. It is hard to understand I know, here is some of my code:


<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script type="text/javascript">
function myfunc() {

<textarea style="width: 650px; height: 450px; position: absolute; left: 0px; top: 0px; z-index: -1;"
rows="0" cols="0"></textarea>
<div style="width: 650px; height: 450px; position: absolute; left: 0px; top: 0px; z-index: 1; background-color: #FFFFFF;">
<button style="position: absolute; left: 600px; top: 480px; z-index: 1;"


If you click on the button you are focused on the editor and you can type, click it again to see the contents of it, but I can not seem to get the contents displayed in the div, well I can, but the font and size is different (because of scrollbars etc) and so it does not line up. Can anyone help me with this?

07-13-2005, 02:22 AM
I don't see CSS specifying font family and size. I'm pretty sure you can do that for both. Give that a shot.

Willy Duitt
07-13-2005, 02:46 AM
Have you considered a contentEditable division and if submitting a form using a hidden form element to copy the contents of the division too... In other words, get rid of the textarea...


07-13-2005, 02:43 PM
I have been looking into that, as it is how much WYSIWYG editors work, however I am not sure about browser compatibility with them, any info?

07-13-2005, 03:08 PM
WYSIWYG editors are nothing more than a set of objects, properties, methods, and events. So it's down to which ones exist in a given browser's object model. (IE seems to have the richest editing capabilities, for that matter.) If you can't find a compatibility table, you may need to consult the documentation of each browser, compare the available objects, properties, methods, and events, and figure out how to encapsulate those in such a way that they are consistent between hosts.

07-13-2005, 03:15 PM
I have done some looking up and it seems that Gecko, IE and the new version of Safari support it. So I am looking for any cross-os example code that will allow me to make a div or any other element editable.

07-13-2005, 07:47 PM
I have been looking into designMode, however I do have a problem with it, enter keys, I am making a texteditor (highlighting) and want each new line to be a new <li> (which will be a member of a <ol>, for line numbers) but it seems that the browsers like <p> can anyone help me?