SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    May 2002
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Moving Cursor from one textbox to another

    Hi all,
    I am trying to automatically move from one text box to another depending on the length of the value entered. For example if I want the user to enter a phone number, and I have 3 textboxes, one for the area code, prefix etc, when the area code box has 3 numbers in it the curser should move to the next box. I've seen this somewhere before and maybe it was with vbscript but don't know.
    Thanks
    Grizz

  2. #2
    SitePoint Addict lveale's Avatar
    Join Date
    Jun 2001
    Location
    Dublin
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd to it in JavaScript:

    function checkField()
    {
    if (document.formname.fieldname.value.length != 3) {
    document.formname.fieldname.focus();
    } else
    {
    document.formname.nextfieldname.focus();
    }
    }

    Within the form, you need an event on the field to be checked,

    onKeyup='checkField()'

  3. #3
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    the following is a bit more flexible since it doesn't include any hard-wiring:

    Code:
    <script language="javascript" type="text/javascript">
    <!--
    function checkField(formObj, fldObj)
    {
       for (i = 0; i < formObj.length; i++)
    	 if (formObj[i] == fldObj)
    	   if (fldObj.value.length == parseInt(fldObj.maxLength))
    	   {
    		 if (i < formObj.length -1 )
    			fldObj = formObj[++i];
    		 fldObj.focus();
    	   }
      }
    //-->
    </script>
    </head>
    <body>
    <form name="phone">
    <input type="text" maxlength="3" onkeyup='checkField(this.form, this)'>
    <input type="text" maxlength="3" onkeyup='checkField(this.form, this)'>
    <input type="text" maxlength="4" onkeyup='checkField(this.form, this)'>
    </form>
    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  4. #4
    SitePoint Member
    Join Date
    Sep 2003
    Location
    Cali
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up focus() on first field in first form of page

    Nice function vinny! A somewhat simpler way would probably be :
    Code:
    <script>
    //function checkFileld(formObject, fldObject){ //old 
      function checkFileld(fldObject){             //new
        var formObject = fldObject.form;           //addition
        ...rest as usual...
       }
    </script>
    ...
    <!--<input text maxlength="3" onkeyup="checkField(this.form, this)"> old-->
    <input text maxlength="3" onkeyup="checkField(this)"> <!-- new-->
    That way you save passing a derivable value into the function.

    Here's another generic function to focus on the first visible field in the first form on the page.
    Code:
      var i=0;
      var j=0;
      var focusControl = document.forms[0].elements[i];
      var len = document.forms[0].length;
      
      //loop thru the first form to find the first visible field
      for (j=0; j < len; j++){
        if ( (focusControl.type == "hidden") || (focusControl.style.display == "none") ){
          i++;
          focusControl = document.forms[0].elements[i];
        }else{
          break; //found first visible control, so break out of loop
        }
      }
      
      //focus on field if not undefined
      if (focusControl != "undefined"){
        focusControl.focus();
      }
    A sample function that focusses on first visible control in the first form on the page. It is generic enought to be used anywhere.
    Last edited by DJ_Java; Sep 8, 2003 at 20:20.

  5. #5
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My variation, for the curious
    Code:
    <script type="text/javascript">
    	function tabTo( cf, nf )
    	{
    		if ( cf.value.length == cf.getAttribute( 'maxlength' ) );
    		cf.form.elements[nf].focus(); 
    	} 
    </script>
    
    <form name="myForm"> 
    	<input type="text" name="phone1" maxlength="3" size="3" onkeyup="tabTo(this,'phone2')"> 
    	<input type="text" name="phone2" maxlength="3" size="3" onkeyup="tabTo(this,'phone3')"> 
    	<input type="text" name="phone3" maxlength="4" size="4"> 
    </form>
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •