retrieving cursor position

pippi1814 · Aug 5, 2004

I have a textarea where I entered some text and also selected part of it and a button calls a function that sends the text in the area *and* the positions of the
selected text to a function
Like this code:
<input name="cmdBold" type="button" value="Bold" onClick="bold()"><br>
<textarea name="txtText"></textarea>
How can I find out the positions? Any simple examples?

tsuji · Aug 6, 2004

Hello pippi1814,

You can develop from dhtml caretPos. Very cunning design.

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwebteam/html/webteam12032001.asp

Only that it is based on jscript.

Code:

<!-- ms demo script
     ref: [URL unfurl="true"]http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwebteam/html/webteam12032001.asp[/URL]
-->
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JScript">
function saveCaret(elem)
{
  if ( elem.isTextEdit ) 
    elem.caretPos = document.selection.createRange();
}
function getCaretPos(elem)
{
  if ( elem.isTextEdit && elem.caretPos )
  {
    var bookmark = "~";
    var orig = elem.value;
    var caretPos = elem.caretPos;
    caretPos.text = bookmark;
    var i = elem.value.search( bookmark );
    window.status = "Caret is at character " + i;
    elem.value = orig;
  }
}
</SCRIPT>
</HEAD>

<BODY>
<INPUT NAME="txtInput" ONSELECT="saveCaret(this)" 
   ONCLICK="saveCaret(this)" ONKEYUP="saveCaret(this)" VALUE="Where are you?">
<INPUT TYPE="button" VALUE="caret pos" ONCLICK="getCaretPos(txtInput)">
</BODY>
</HTML>

regards - tsuji

terriblecow · Oct 7, 2004

Hey tsuji I liked your design there. I only had one problem with it. After finding the caret or cursor position the script moved the cursor to the last character in the textarea, so I did a bit of development and found a few mods that will leave the cursor in the same place in the textarea. Which if you're set to determine the cursor position an every keystroke is crucial. I'll post the code then try to explain it.

Code:

<html>
<head>
  <script language="javascript">
  <!--[highlight #f0f0f0]
[blue]function[/blue] saveCaret(otxt)
{
  [blue]if[/blue] (otxt.isTextEdit) 
		[blue]if[/blue] (document.selection)
			otxt.caretPos [COLOR=magenta]=[/color] [blue]document[/blue].selection.createRange().duplicate();
}
[blue]function[/blue] getCaretPos(otxt)
{
  [blue]if[/blue] ( otxt.isTextEdit [COLOR=magenta]&&[/color] otxt.caretPos )
  {
    otxt.focus();    
    [blue]var[/blue] bookmark [COLOR=magenta]=[/color] [red]"~!~"[/red];             
    [blue]var[/blue] caretPos [COLOR=magenta]=[/color] otxt.caretPos;
    caretPos.collapse([blue]true[/blue]);    
    [blue]var[/blue] origCaret [COLOR=magenta]=[/color] caretPos.text;    
    caretPos.text [COLOR=magenta]=[/color] bookmark;    
    [blue]var[/blue] i_caretPos [COLOR=magenta]=[/color] otxt.value.search( bookmark );    
    [blue]window[/blue].status [COLOR=magenta]=[/color] [red]"Caret is at character "[/red] [COLOR=magenta]+[/color] i_caretPos;    		
		caretPos.moveStart([red]'character'[/red],(0 [COLOR=magenta]-[/color] bookmark.length));        
    caretPos.execCommand([red]'Delete'[/red]);
    [blue]return[/blue] i_caretPos;
  }
}
  [/highlight]//-->
  </script>	
</head>
  <body>
    <textarea id="txtcanvas"  
          style="width:100%;height:100px;" 
          onkeydown="saveCaret(this);getCaretPos(this);"
          onkeyup="saveCaret(this);getCaretPos(this);"
     ></textarea>
  </body>
</html>

So the main difference with this code is that the script never assigns the entire value of the textarea to the origonal in order to eliminate the bookmark string.

Instead we move the start of caretPos the back three characters. This is like if you were to put your cursor in any textarea and held shift down while you clicked the left arrow three times. So now that we have the text of the bookmark selected in the text area. Then we just delete the text by calling execCommand('Delete').

There you have it. instead of resetting the whole text area we just delete the text we inserted to determine the cursor position.

Hope this helps

-TerribleCow (_)
@

tsuji · Oct 8, 2004

Hello terriblecow,

Thanks for the posting.

I think you may have reason to use a more uncommon char combination for the bookmark. (Whether it has a edge over, I'm not sure.) Also, the use of .dupliate() has me thinking. It should be the base of what you intend to refine the functionality, being :

>that the script never assigns the entire value of the textarea to the origonal in order to eliminate the bookmark string

That is good, I like it because the original mechanism shown up on a slow system bookmark appearing and disappearing. (I have not actually tested your script. I'll during weakend.)

This area of functionality is quite tricky, or maybe I'm not very sessioned in it. Thanks for sharing your idea.

regards - tsuji

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

retrieving cursor position

pippi1814

Programmer

tsuji

Technical User

terriblecow

Programmer

tsuji

Technical User

Similar threads

Part and Inventory Search

Sponsor