Text box cursor location

Collapse
X
Collapse
 
  • Page of 2
  • Time
  • Show
Clear All
new posts
Previous 1 2 template Next
  • Frinavale
    Recognized Expert Expert
    • Oct 2006
    • 9749
    #1

    Text box cursor location

    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
    Tags: None
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      You can find the location using selection range properties. See this link (not exactly the solution, but you can work with it).

        Comment

        • Frinavale
          Recognized Expert Expert
          • Oct 2006
          • 9749
          #3
          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.select ion.createRange () is responsible for.

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

          Thanks for your help!

          -Frinny

            Comment

            • jx2
              New Member
              • Feb 2007
              • 228
              #4
              [HTML]<html><head>
              <SCRIPT LANGUAGE="JAVAS CRIPT"><!--
              function show_coords(eve nt)
              {
              x=event.clientX
              y=event.clientY
              document.getEle mentById("coord s").innerHTML=( "X coords: " + x + ", Y coords: " + y)
              }
              --></SCRIPT>

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

              i hope it helps
              jx2

                Comment

                • jx2
                  New Member
                  • Feb 2007
                  • 228
                  #5
                  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

                    Comment

                    • acoder
                      Recognized Expert MVP
                      • Nov 2006
                      • 16032
                      #6
                      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.select ion.createRange () is responsible for.

                      Or even what document.select ion 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.

                        Comment

                        • acoder
                          Recognized Expert MVP
                          • Nov 2006
                          • 16032
                          #7
                          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.

                            Comment

                            • Frinavale
                              Recognized Expert Expert
                              • Oct 2006
                              • 9749
                              #8
                              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

                                Comment

                                • Frinavale
                                  Recognized Expert Expert
                                  • Oct 2006
                                  • 9749
                                  #9
                                  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

                                    Comment

                                    • adrian74
                                      New Member
                                      • Sep 2007
                                      • 1
                                      #10
                                      The cursor position control example is exactly what I need, but I need to do this on a content editable element.

                                        Comment

                                        • Frinavale
                                          Recognized Expert Expert
                                          • Oct 2006
                                          • 9749
                                          #11
                                          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

                                            Comment

                                            • MRamaLakshmi
                                              New Member
                                              • Jun 2007
                                              • 6
                                              #12
                                              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.

                                                Comment

                                                • acoder
                                                  Recognized Expert MVP
                                                  • Nov 2006
                                                  • 16032
                                                  #13
                                                  Easy - check the source of the linked page.

                                                    Comment

                                                    • MRamaLakshmi
                                                      New Member
                                                      • Jun 2007
                                                      • 6
                                                      #14
                                                      Originally posted by acoder
                                                      Easy - check the source of the linked page.
                                                      the source is pointing to some external js file.

                                                        Comment

                                                        • gits
                                                          Recognized Expert Moderator Expert
                                                          • May 2007
                                                          • 5390
                                                          #15
                                                          ... 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:

                                                          404 Not Found
                                                          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

                                                            Comment

                                                            Previous 1 2 template Next
                                                            Working...