SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Get zIndex based on Tab click

    Hello

    I am curious if this is possible. I want to control logic based on the Tab key being pressed. Here is my situation. I am placing a div over a page. This div acts like Lightbox (puts a grey shadow over the entire page). Then there is a div placed on the Lightbox. The div over the Lightbox has a higher zIndex then the zIndex for the Lightbox. Here is what I am looking to do. When the tab key is pressed, I want to check the item the cursor would move to, to see if the zIndex is greater or less than the Lightbox zIndex. If the zIndex is greater, then the cursor needs to have focus on the object. If the zIndex is not greater than Lightbox, I then want to check the next object on the page until it finds one that is greater. Basically, I only want the cursor to stop on page elements that are above the Lightbox, based on the zIndex. My problem is that I have no idea how to loop thru the objects on the page and check their zIndex. Could someone point me in the right direction on how I can loop thru the zIndex items on a page (by default all items should have a zIndex of 1)?

    Here is how I listen for the tab press:
    Code:
    <script type="text/javascript">
       function handleKeyPress( evt )
       {
          if( window.event.keyCode == 9 )
          {
             return false; //-- Stops tab
          }
       }
    
    document.onkeydown= handleKeyPress;
    </script>
    Thanks in advance for your time.

  2. #2
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After doing more Google searches and not finding anything helpful, I am taking a new approach to this. Instead of trying to detect which is the next element based on the tab key press, I will pass in the acceptable tab areas in an array. Then, when the user presses the tab key, JavaScript will loop thru the acceptable tab areas and place the focus on the next acceptable tab location.

    Please take a look at my proof of concept. If you see any flaws in this or know of a way this type of logic could be improved, please let me know.

    Logic like this would also have to be added for backwards tabbing (SHIFT + TAB);

    Here is my code:

    Code JavaScript:
    <html>
    <head>
     
    <script language="JavaScript">
    document.onkeydown = checkKeycode
    var currentTabLocation = 0;
    var validTabArray = new Array( "txt1", "txt2", "txt4", "txt5" );
    var tabTo;
     
    function checkKeycode(e) 
    {
    	var keycode;
     
    	if( window.event ) 
    	{
    		keycode = window.event.keyCode;
    	}
    	else if( e ) 
    	{
    		keycode = e.which;
    	}
     
    	if( keycode == 9 )
    	{
    		if( currentTabLocation < parseInt( ( validTabArray.length - 1 ) ) )
    		{
    			tabTo = parseInt( currentTabLocation + 1 ); 
    		}
    		else
    		{
    			tabTo = parseInt( 0 );
    		}
    		//-- Delay so the set focus() occurs after after the users tab click which fired this event
    		setTimeout( "document.getElementById( validTabArray[ tabTo ] ).focus();", 1 );
    		currentTabLocation = tabTo;
    	}
    }
     
    function start()
    {
    	document.getElementById( "txt1" ).focus();
    }
    </script>
     
    </head>
    <body onLoad="start();">
     
    txt1 <input type="text" id="txt1" />
    <br>
    txt2 <input type="text" id="txt2" />
    <br>
    txt3 <input type="text" id="txt3" />
    <br>
    txt4 <input type="text" id="txt4" />
    <br>
    txt5 <input type="text" id="txt5" />
    <br>
     
    </body>
    Last edited by TryingToLearn; Dec 22, 2007 at 14:23. Reason: Add Backwards Tab Comment

  3. #3
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I modified the code to handle the SHIFT + TAB

    Code JavaScript:
    <html>
    <head>
     
    <script language="JavaScript">
    document.onkeydown = checkKeycode
    var currentTabLocation = 0;
    var validTabArray = new Array( "txt1", "txt2", "txt4", "txt5" );
    var tabTo;
    var TAB = 9;
     
    function checkKeycode(e) 
    {
    	var keyCode = (window.event) ? event.keyCode : e.keyCode;
    	var shiftDown = (window.event) ? event.shiftKey : e.shiftKey; 
     
    	if( keyCode == TAB )
    	{
    		if( shiftDown )
    		{
    			if( currentTabLocation == 0 )
    			{
    				tabTo = parseInt( ( validTabArray.length - 1 ) ); 
    			}
    			else
    			{
    				tabTo = parseInt( currentTabLocation - 1 );
    			}
    		}
    		else
    		{
    			if( currentTabLocation < parseInt( ( validTabArray.length - 1 ) ) )
    			{
    				tabTo = parseInt( currentTabLocation + 1 ); 
    			}
    			else
    			{
    				tabTo = parseInt( 0 );
    			}
    		}
     
    		//-- Delay so the set focus() occurs after after the users tab click which fired this event
    		setTimeout( "document.getElementById( validTabArray[ tabTo ] ).focus();", 1 );
    		currentTabLocation = tabTo;
    	}
    }
     
    function start()
    {
    	document.getElementById( "txt1" ).focus();
    }
    </script>
     
    </head>
    <body onLoad="start();">
     
    txt1 <input type="text" id="txt1" />
    <br>
    txt2 <input type="text" id="txt2" />
    <br>
    txt3 <input type="text" id="txt3" />
    <br>
    txt4 <input type="text" id="txt4" />
    <br>
    txt5 <input type="text" id="txt5" />
    <br>
     
    </body>

  4. #4
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just figured out I missed one very important line of code. In the case where the cursor is on the last acceptable tab stop but the next item that could receive the cursor on tab click is not within your viewport (is either above or below the viewable area) when the user presses the tab key, the screen jumps around a little. To solve this issue, just return false so it completely stops the tab click. The setTimeout method will take care of setting the cursor in the proper text box based on tab click.

    Here is the code

    Code JavaScript:
    <html>
    <head>
     
    <script language="JavaScript">
    document.onkeydown = checkKeycode
    var currentTabLocation = 0;
    var validTabArray = new Array( "txt1", "txt2", "txt4", "txt5" );
    var tabTo;
    var TAB = 9;
     
    function checkKeycode(e) 
    {
        var keyCode = (window.event) ? event.keyCode : e.keyCode;
        var shiftDown = (window.event) ? event.shiftKey : e.shiftKey; 
     
        if( keyCode == TAB )
        {
            if( shiftDown )
            {
                if( currentTabLocation == 0 )
                {
                    tabTo = parseInt( ( validTabArray.length - 1 ) ); 
                }
                else
                {
                    tabTo = parseInt( currentTabLocation - 1 );
                }
            }
            else
            {
                if( currentTabLocation < parseInt( ( validTabArray.length - 1 ) ) )
                {
                    tabTo = parseInt( currentTabLocation + 1 ); 
                }
                else
                {
                    tabTo = parseInt( 0 );
                }
            }
     
            //-- Delay so the set focus() occurs after after the users tab click which fired this event
            setTimeout( "document.getElementById( validTabArray[ tabTo ] ).focus();", 1 );
            currentTabLocation = tabTo;
    		//-- Disable the next tab location since the next position is provided above
    		return false;
        }
    }
     
    function start()
    {
        document.getElementById( "txt1" ).focus();
    }
    </script>
     
    </head>
    <body onLoad="start();">
     
    txt1 <input type="text" id="txt1" />
    <br>
    txt2 <input type="text" id="txt2" />
    <br>
    txt3 <input type="text" id="txt3" />
    <br>
    txt4 <input type="text" id="txt4" />
    <br>
    txt5 <input type="text" id="txt5" />
    <br>
    txt6 <input type="text" id="txt6" onFocus="alert('txt6');" />
     
    </body>
    </html>


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
  •