How to move in to next tab using Tab key

JavaScript
1

I am following this tutorial: http://www.jacklmoore.com/notes/jquery-tabs/

In which i created text boxes in tab 1,2,3. i want to create a function when user in first tab after pressing the tab key it will move in to next tab. How i can do this. I am using asp.net text boxes and drop down list in tabs. I was give tab index to inputs but it was not working. I want to do this using jquery.

<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8'/>
		<title>jQuery Tabs Demo</title>
		<style>
			* {padding:0; margin:0;}

			html {
				background:url(/img/tiles/wood.png) 0 0 repeat;
				padding:15px 15px 0;
				font-family:sans-serif;
				font-size:14px;
			}

			p, h3 { 
				margin-bottom:15px;
			}

			div {
				padding:10px;
				width:600px;
				background:#fff;
			}

			.tabs li {
				list-style:none;
				display:inline;
			}

			.tabs a {
				padding:5px 10px;
				display:inline-block;
				background:#666;
				color:#fff;
				text-decoration:none;
			}

			.tabs a.active {
				background:#fff;
				color:#000;
			}

		</style>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script>
			// Wait until the DOM has loaded before querying the document
			$(document).ready(function(){
				$('ul.tabs').each(function(){
					// For each set of tabs, we want to keep track of
					// which tab is active and it's associated content
					var $active, $content, $links = $(this).find('a');

					// If the location.hash matches one of the links, use that as the active tab.
					// If no match is found, use the first link as the initial active tab.
					$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
					$active.addClass('active');
					$content = $($active.attr('href'));

					// Hide the remaining content
					$links.not($active).each(function () {
						$($(this).attr('href')).hide();
					});

					// Bind the click event handler
					$(this).on('click', 'a', function(e){
						// Make the old tab inactive.
						$active.removeClass('active');
						$content.hide();

						// Update the variables with the new link and content
						$active = $(this);
						$content = $($(this).attr('href'));

						// Make the tab active.
						$active.addClass('active');
						$content.show();

						// Prevent the anchor's default click action
						e.preventDefault();
					});
				});
			});
		</script>
	</head>
	<body>
		<ul class='tabs'>
			<li><a href='#tab1'>Tab 1</a></li>
			<li><a href='#tab2'>Tab 2</a></li>
			<li><a href='#tab3'>Tab 3</a></li>
		</ul>
		<div id='tab1'>
			<h3>Section 1</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis placerat dolor id aliquet. Sed a orci in justo blandit commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
		</div>
		<div id='tab2'>
			<h3>Section 2</h3>
			<p>Aenean et est tortor. In pharetra pretium convallis. Mauris sollicitudin ligula non mi hendrerit varius. Fusce convallis hendrerit mauris, eu accumsan nisl aliquam eu.</p>
		</div>
		<div id='tab3'>
			<h3>Section 3</h3>
			<p>Suspendisse potenti. Morbi laoreet magna vitae est mollis ultricies. Mauris eget enim ac justo eleifend malesuada. Proin non consectetur est. Integer semper laoreet porta. Praesent facilisis leo nec libero tincidunt blandit.</p>
		</div>
	</body>
</html>
2

Hi user100kk, welcome to the forums,

Have you tried tabindex?

Overview

Web applications often use JavaScript to mimic desktop widgets such as menus, tree views, rich text fields, and tab panels. These widgets are typically composed of <div> and <span> elements that do not, by nature, offer the same keyboard functionality that their desktop counterparts do. This document describes techniques to make JavaScript widgets accessible with the keyboard.

*from https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets?redirectlocale=en-US&redirectslug=Accessibility%2FKeyboard-navigable_JavaScript_widgets

3

Hi,

Change this:

$(this).on('click', 'a', function(e){ ... });

to this

$(this).on('click focus', 'a', function(e){ ... });

Does that work for you?

4

I want to create functionality when user use tab key for moving in to next tab. Every tab contains some text boxes. When user in last text box of tab 1 when it press the tab key, it will go into next text box of tab2. I am creating tab using plain HTML css and jQuery. I am not using tab functionality of jQuery UI but it is latest jquery. The below is my HTML. I am creating tab using ul and li. How I move into next li when my tab in first text box. The tabs contains like dropdown,checkboxes,texboxes. Note : i am not using tabindex due to some issue. i want to create using jquery)

html

<ul class='tabs'>
        <li><a href='#tab1'>Tab 1</a></li>
        <li><a href='#tab2'>Tab 2</a></li>
        <li><a href='#tab3'>Tab 3</a></li>
      </ul>
      <div id='tab1'>
        <ul class= "set2"> 
            <li>  test 1<asp:TextBox runat="server"  ID="test1" /></li>
            <li>  test 2<asp:TextBox runat="server"  ID="test2" /></li>
        </ul>
      </div>
      <div id='tab3'>
        <ul class= "set2"> 
            <li>  test 3<asp:TextBox runat="server"  ID="test3" /></li>
            <li>  test 4<asp:TextBox runat="server"  ID="test4" /></li>
        </ul>
      </div>
      <div id='tab3'>
        <ul class= "set"> 
            <li>  test 5<asp:TextBox runat="server"  ID="test5" /></li>
            <li>  test 6<asp:TextBox runat="server"  ID="test6" /></li>
        </ul>
      </div>

script

$(document).on('keypress',function(e) {
 var keyCode = e.keyCode || e.which; 
 if (keyCode == 9) {       //if the key pressed was 'tab'...
    e.preventDefault(); 
    //how to focus on the next tab, 
    //remember to select the very first tab when you reach the last tab!
  } 
});

CSS

* {padding:0; margin:0;}

    html {
        background:url(/img/tiles/wood.png) 0 0 repeat;
        padding:15px 15px 0;
        font-family:sans-serif;
        font-size:14px;
    }

    p, h3 { 
        margin-bottom:15px;
    }

    div {
        padding:10px;
        width:600px;
        background:#fff;
    }

    .tabs li {
        list-style:none;
        display:inline;
    }

    .tabs a {
        padding:5px 10px;
        display:inline-block;
        background:#666;
        color:#fff;
        text-decoration:none;
    }

    .tabs a.active {
        background:#fff;
       color:#000;
    }