CODEWITHSUNDEEP
javascriptjqueryhtmlcsstabs
user3149053
user3149053

Reputation: 43

How to set focus int o next tab using tab key?

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, textboxes.

Note : I am not using tabindex due to some issue. I want to create using jQuery)

<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

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

$(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!
  } 
});
  });
            </script>

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

Upvotes: 0

Views: 7827

Answers (5)

mahendra rajeshirke
mahendra rajeshirke

Reputation: 122

Pls have a look http://aeonit.name/RND/blur_hover_detect_tabs/ or http://mraje.in/mraje/rnd/blur_hover_detect_tabs/

I have done something like this.. You may help this...

Upvotes: 1

sanman
sanman

Reputation: 57

I do agree with Niranjan. 'tabindex' attribute is the right option and very simple to use. Lets keep jquery away for sometime.

Upvotes: 0

Niranjan Borawake
Niranjan Borawake

Reputation: 1638

Have you checked tabindex attribute? I think this might be of some use in your case. Check this example for its usage.

<div class="tab" tabindex="1">Tab 1</div>
<div class="tab" tabindex="3">Tab 3</div>
<div class="tab" tabindex="5">Tab 5</div>
<div class="tab" tabindex="4">Tab 4</div>
<div class="tab" tabindex="2">Tab 2</div>

Upvotes: 0

Linga
Linga

Reputation: 10555

Simply try

$('selector').focus();

Also,

$(document).on('keypress',function(e) {
    var keyCode = e.keyCode || e.which; 
    if (keyCode == 9) {       //if the key pressed was 'tab'...
         e.preventDefault();
         if($(this).nextAll('input').length === 0) {
              // this is the last input element
              $('input[type=text]:enabled:first').focus();// first textbox
         }
         else
         {
              $(this).next('input').focus();
         }
    } 
});

Upvotes: 0

SivaRajini
SivaRajini

Reputation: 7375

Try this:

$('.tabs').tabs("option", "active", 1);
or

$('.tabs').tabs({active, 1});

Set default tab in jQuery UI Tabs

UPDATE Since jQuery UI 1.9

The select method has been deprecated in favor of just updating the active option.

You should replace all calls to the select method with calls to the option method to change the active option.

for below version jquery UI 1.9

$('ele').tabs('select', index);

or use focus method of jquery

$( "#target" ).focus();

Thanks,

Siva

Upvotes: 0

Related Questions