how to move into next tab using Tab key

Question

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. This jquery

$('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();
  });
});

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'>
    <p>Hi, this is the first tab.</p>
  </div>
  <div id='tab2'>
    <p>This is the 2nd tab.</p>
  </div>
  <div id='tab3'>
    <p>And this is the 3rd tab.</p>
  </div>

style

<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>

use tabindex as a html attribute in the page instead – Sudip Pal Jan 03 '14 at 11:09 — Sudip Pal, Jan 03 '14 at 11:09
You can assign tabindex using jquery attr() method also. – Sudip Pal Jan 03 '14 at 11:24 — Sudip Pal, Jan 03 '14 at 11:24
i want to create without using tab index – user3149053 Jan 03 '14 at 11:30 — user3149053, Jan 03 '14 at 11:30

score 2 · Answer 1 · edited May 23 '17 at 10:25

2

I think the basic recipe to do this without tabindex (why do you want to do this btw?) would be something like:

$(document).on('keypress',function(e) {
 var keyCode = e.keyCode || e.which; 
 if (keyCode == 9) {       //if the key pressed was 'tab'...
    e.preventDefault(); 
    //put code here to focus on the next tab, 
    //probably using http://api.jquery.com/focus/ .focus()
    //remember to select the very first tab when you reach the last tab!
  } 
});

with thanks to this answer: jQuery: How to capture the TAB keypress within a Textbox

edited May 23 '17 at 10:25

Community

1
1

answered Jan 03 '14 at 12:34

StackExchange What The Heck

2,656
7
39
51

thanks for the answer.how can i merge this code with my current code because i already write the ('ul.tabs').on or what about click event? can u complete this – user3149053 Jan 03 '14 at 12:53
It should be fine to paste in directly after the closing brackets of code that you've pasted up in the question. How familiar are you with jQuery? http://learn.jquery.com/javascript-101/ has some nice resources to get you familiar with jQuery and javascript which would make this easier for you. – StackExchange What The Heck Jan 03 '14 at 13:00
thanks. ya i am learning jquery. thanks for the links . but how i use focus()? can u write for focus() – user3149053 Jan 03 '14 at 13:09
It's a bit hard to for me to choose an appropriate selector without seeing the actual HTML. If you pop your code into a jsfiddle http://jsfiddle.net/ and paste in the link, I'll see what I can do and try to add an explanation of what is going on. – StackExchange What The Heck Jan 03 '14 at 13:12

score 0 · Answer 2 · answered Apr 19 '19 at 06:40

$(document).ready(function() {
 $('input:text:first').focus();
 $('input:text').bind("keydown", function(e) {enter code here
    var n = $("input:text").length;
    if (e.which == 9)
    {enter code here e.preventDefault();
      var nextIndex = $('input:text').index(this) + 1;`enter code here`
      if(nextIndex < n)
      {
        $('input:text')[nextIndex].focus();
      }
      else
      {
        $('input:text')[nextIndex-1].blur();
        $('#btnSubmit').click();
      }
    }
  });
  $('#btnSubmit').click(function() {
     alert('Form Submitted');
  });

how to move into next tab using Tab key

2 Answers2