www.webdeveloper.com
Results 1 to 2 of 2

Thread: controlling the cusor position and tabs

  1. #1
    Join Date
    Jun 2009
    Posts
    1

    controlling the cusor position and tabs

    Hello,

    I am new to this forum and I have done a fair bit of searching but just can't seem to find what I am looking for. I have a web form with about 15 fields and I want to be able to control where the cursor goes when tabbing or using the arrow keys. I almost have the code but not quite.

    Code:
    <?xml version="1.0" encoding="UTF-8"?> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
    <head> 
    <title></title> 
    
    
    
    
    
    <script type="text/javascript"> 
    
    
    
    function setFocus(previous,next) {
    
    var key;
    
     if (window.event)
        {
            key = window.event.keyCode;
        }
        else if(e)
        {
            key =  e.which;
        }
        else
        {
            key = null;
        }
    
    
    
    switch(key)
        {
    
    		case 9:
    			//alert("tab");
    		
    		break;
    	
    		case 13:    // Enter Key
    		document.getElementById(next).focus();
             break;
    
            case 37:   // Left Arrow
    		document.getElementById(previous).focus();
            break;
    		
            case 38:   // Up Arrow
    		document.getElementById(previous).focus();
            break;
    
            case 39:   // Right Arrow
    		document.getElementById(next).focus();
            break;			  
    
            case 40:   // Down Arrow
    		document.getElementById(next).focus();
            break;
                  
    
        }
        
    
    
    }
    
    
    
    
    
    
    
    </script> 
    
    
    </head>
    <body >
    
    <form name="sampleform">
    
    
    
    <input type="text" name="first" size=4 maxlength=3 onkeyup="setFocus('fifth','second')" tabindex="1">1 <br/>
    <input type="text" name="second" size=4 maxlength=3 onkeyup="setFocus('first','third')" tabindex="2"> 2	  <br/>
    <input type="text" name="third" size=4 maxlength=3 onkeyup="setFocus('second','fourth')" tabindex="3">3 		   <br/>
    <input type="text" name="fourth" size=4 maxlength=3 onkeyup="setFocus('third','fifth')" tabindex="4">4 				<br/>
    <input type="text" name="fifth" size=4 maxlength=3 onkeyup="setFocus('fourth','first')" tabindex="5"> 5
    
    </form>
    
    </body> 
    </html>
    The problem with this code is I am not able to capture the "Shift+Tab" combination. Anyone know a better way to accomplish what I am trying to do? Thanks in advance for the help!

  2. #2
    Join Date
    Oct 2008
    Posts
    28
    Is there a reason why you need to worry about Shift-tab and tab key presses? I haven't found anything about a keycode being sent for Shift-tab, so you might have to just put up with that default behaviour. However, I was poking around with your concept a little bit and this is what I've hacked together. It uses the form elements element to determine what field is next or prior without having to pass that information in each call to the function.

    Code:
    <?xml version="1.0" encoding="UTF-8"?> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
    <head> 
    <title></title> 
    
    <script type="text/javascript"> 
    function setFocus(e,input) 
    {
    	var key;
    	if (window.event){key = window.event.keyCode;}
        else if(e.which){key =  e.which;}
        else{key = null;}
    
    	var forward = null;
    	var back = null;
    	
    	switch(key)
        {
    		case 13:    // Enter Key
    		forward = true;
    		break;
    
            case 37:   // Left Arrow
    		back = true;
    		break;
    		
            case 38:   // Up Arrow
    		back = true;
    		break;
    
            case 39:   // Right Arrow
    		forward = true;
    		break;			  
    
            case 40:   // Down Arrow
            forward = true;
    		break;
    	}
    	
    	if(forward)
    	{
    		goForward(input);
    	}
    	else if(back)
    	{
    		goBack(input);
    	}
    }
    
    function goBack(input)
    {
    	var form_name = input.form.id;
    	var next = input.tabIndex;
    	var len = document.getElementById(form_name).length;
    	if(next == "1") 
    	{
    		document.getElementById(form_name).elements[len - 1].focus();
    	}
    	else
    	{
    		document.getElementById(form_name).elements[next - 2].focus();
    	}
    }
    
    function goForward(input)
    {
    	var form_name = input.form.id;
    	var next = input.tabIndex;
    	if(next == document.getElementById(form_name).length)
    	{
    		document.getElementById(form_name).elements[0].focus();
    	}
    	else
    	{
    		document.getElementById(form_name).elements[next].focus();
    	}
    }
    
    </script> 
    
    
    </head>
    <body >
    
    <form name="sampleform" id="sampleform">
    <input type="text" name="first" size=4 maxlength=3 onkeyup="setFocus(event,this)" tabindex="1">1<br/>
    <input type="text" name="second" size=4 maxlength=3 onkeyup="setFocus(event,this)" tabindex="2">2<br/>
    <input type="text" name="third" size=4 maxlength=3 onkeyup="setFocus(event,this)" tabindex="3">3<br/>	   
    <input type="text" name="fourth" size=4 maxlength=3 onkeyup="setFocus(event,this)" tabindex="4">4<br/>			
    <input type="text" name="fifth" size=4 maxlength=3 onkeyup="setFocus(event,this)" tabindex="5"> 5<br/>
    </form>
    
    </body> 
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles