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!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

retrieving cursor position

Status
Not open for further replies.
pippi1814

pippi1814

Programmer
Feb 9, 2004
6
0
0
NL
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?
 
Sort by date Sort by votes
Hello pippi1814,

You can develop from dhtml caretPos. Very cunning design.
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
 
Upvote 0 Downvote
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 (_)
@
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scooby99
  • Locked
  • Question
Help retrieving text after InStr 1
Replies
2
Views
32
scooby99
scooby99
Trial4life
  • Locked
  • Question
Mark a GPS photo position on Google Earth
Replies
2
Views
16
Trial4life
Trial4life
kdjonesmtb2
  • Locked
  • Question
How to find position 1421 in a txt file
Replies
19
Views
54
strongm
strongm
crackoo
  • Locked
  • Question
RegExp pattern for retrieving data between 2 Tags
Replies
6
Views
40
strongm
strongm
xwb
  • Locked
  • Question
Setting icon position on desktop
Replies
5
Views
36
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top