Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > answers

Text box cursor location

Frinavale's Avatar
Site Moderator
  
Join Date: Oct 2006
Location: The Great White North
Posts: 5,719
#1: Apr 17 '07
I am just wondering if it is possible to determine where the cursor is located within an <input type='text'> element using JavaScript?

I'd like to write a snippet of code that will move to the focus to the next text box when the user has pressed the left arrow key and the cursor location has hit the text box's maxLength.

Likewise I'd like the focus to move to the previous text box when the user has pressed the right arrow key (or backspace) and the cursor location has hit the beginning of the text box.

I can't seem to find any property that indicates what the index value of where the cursor is located at within a text element.

Thanks for your help!
-Frinny

acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,750
#2: Apr 18 '07

re: Text box cursor location

You can find the location using selection range properties. See this link (not exactly the solution, but you can work with it).
Frinavale's Avatar
Site Moderator
  
Join Date: Oct 2006
Location: The Great White North
Posts: 5,719
#3: Apr 18 '07

re: Text box cursor location

Quote:

Originally Posted by acoder

You can find the location using selection range properties. See this link (not exactly the solution, but you can work with it).

I am pretty frustrated with this.
I'm finding it very hard to find useful JavaScript resources. W3C is usually where I gather all my information from but when it comes to this stuff it's not very helpful. I've tried your recommended links too but haven't been able to sort out my confusion.

I'm trying to understand the content of that link you sent me but I am confused.

Could you please give me some direction on what document.selection.createRange() is responsible for.

Or even what document.selection is.
I've tried looking up the document object but keep getting vague overview of it.

Thanks for your help!

-Frinny
jx2 jx2 is offline
Familiar Sight
  
Join Date: Feb 2007
Location: Bristol UK
Posts: 227
#4: Apr 18 '07

re: Text box cursor location

[HTML]<html><head>
<SCRIPT LANGUAGE="JAVASCRIPT"><!--
function show_coords(event)
{
x=event.clientX
y=event.clientY
document.getElementById("coords").innerHTML=("X coords: " + x + ", Y coords: " + y)
}
--></SCRIPT>

</HEAD>
<BODY BACKGROUND=red ">
<div id=coords></div><INPUT onmousemove="show_coords(event)">
</body></html>[/HTML]

i hope it helps
jx2
jx2 jx2 is offline
Familiar Sight
  
Join Date: Feb 2007
Location: Bristol UK
Posts: 227
#5: Apr 18 '07

re: Text box cursor location

lol
i vavent read it properly:-)
i thing you need to look here http://javascript.nwbox.com/cursor_position/
see source and be happy:-)
regards
jx2
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,750
#6: Apr 18 '07

re: Text box cursor location

Quote:

Originally Posted by Frinavale

I am pretty frustrated with this.
I'm finding it very hard to find useful JavaScript resources. W3C is usually where I gather all my information from but when it comes to this stuff it's not very helpful. I've tried your recommended links too but haven't been able to sort out my confusion.

I'm trying to understand the content of that link you sent me but I am confused.

Could you please give me some direction on what document.selection.createRange() is responsible for.

Or even what document.selection is.
I've tried looking up the document object but keep getting vague overview of it.

Thanks for your help!

-Frinny

For information about selections, see this link.

Now if you can get the start position of this selection, you should get the cursor position (there's no simple way about it, unfortunately).

Also, read from the Mozilla docs about Selection and Range objects.
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,750
#7: Apr 18 '07

re: Text box cursor location

Quote:

Originally Posted by jx2

lol
i vavent read it properly:-)
i thing you need to look here http://javascript.nwbox.com/cursor_position/
see source and be happy:-)
regards
jx2

Nice link - let's see if it's good enough for Frin.
Frinavale's Avatar
Site Moderator
  
Join Date: Oct 2006
Location: The Great White North
Posts: 5,719
#8: Apr 18 '07

re: Text box cursor location

Quote:

Originally Posted by jx2

lol
i vavent read it properly:-)
i thing you need to look here http://javascript.nwbox.com/cursor_position/
see source and be happy:-)
regards
jx2


Beautiful! Thank you so much!
That's exactly what I would like to do....well just move the cursor back to the previous field once the cursor position reaches 0.

When I looked at the source I noticed that the JavaScript that controls this page is in an external file.

Gur
Frinavale's Avatar
Site Moderator
  
Join Date: Oct 2006
Location: The Great White North
Posts: 5,719
#9: Apr 19 '07

re: Text box cursor location

I finally have a working solution!

<does a little victory dance>

Thank you guys for all your help!
If you hadn't have lead me to the selection stuff I would have never figured this out!


Cheers!!!

-Frinny
Newbie
  
Join Date: Sep 2007
Posts: 1
#10: Sep 19 '07

re: Text box cursor location

The cursor position control example is exactly what I need, but I need to do this on a content editable element.
Frinavale's Avatar
Site Moderator
  
Join Date: Oct 2006
Location: The Great White North
Posts: 5,719
#11: Sep 19 '07

re: Text box cursor location

Quote:

Originally Posted by adrian74

The cursor position control example is exactly what I need, but I need to do this on a content editable element.

What do you mean?
Could you describe your problem in more detail please?

-Frinny
Newbie
  
Join Date: Jun 2007
Posts: 6
#12: Oct 30 '08

re: Text box cursor location

Quote:

Originally Posted by Frinavale

Beautiful! Thank you so much!
That's exactly what I would like to do....well just move the cursor back to the previous field once the cursor position reaches 0.

When I looked at the source I noticed that the JavaScript that controls this page is in an external file.
Gur

Hi,

i am in a urgent need for this cursor position.
it exactly matches my requirement.
if you got the external js file for knowing the cursor position using javascript, please send it to me. its urgent.

thanks.
lakshmi.
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,750
#13: Oct 30 '08

re: Text box cursor location

Easy - check the source of the linked page.
Newbie
  
Join Date: Jun 2007
Posts: 6
#14: Oct 30 '08

re: Text box cursor location

Quote:

Originally Posted by acoder

Easy - check the source of the linked page.

the source is pointing to some external js file.
gits's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,247
#15: Oct 30 '08

re: Text box cursor location

... as acoder said ... its easy, when you look at the source then you see it has to be in the same path so you could just call it in your adress-bar with:

http://javascript.nwbox.com/cursor_position/cursor.js

it's a normal textfile and you should just see the JS-code in your browser ...

kind regards
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,750
#16: Oct 30 '08

re: Text box cursor location

Yes, cursor.js which you can download, view or copy (as long as the license allows). Just type in cursor.js in the address bar to view the contents. If you have a debugger like Firebug (in Firefox), you can just select the file within the 'script' tab.
Newbie
  
Join Date: Jun 2007
Posts: 6
#17: Oct 30 '08

re: Text box cursor location

Quote:

Originally Posted by gits

... as acoder said ... its easy, when you look at the source then you see it has to be in the same path so you could just call it in your adress-bar with:

http://javascript.nwbox.com/cursor_position/cursor.js

it's a normal textfile and you should just see the JS-code in your browser ...

kind regards

thanks for sending the js file.

i am very new to javascript, starting now.
thanks for the help.

well if you don't mind i need some help from you.
Reply

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/other

Forums
Visit our community forums for general discussions and latest on Bytes

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 229,155 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved