i want a button in my html page on clicking the button it works same as a tab button

Question

I want to be able to cycle through a list of elements using a single button event, the same way that you can cycle through elements in a form using the tab button on your keyboard.

<input type="text" class="ans4" style="border-color:#000;">
<input type="text" class="ans5" style="border-color:#000;">
<input type="text" class="ans6" style="border-color:#000;">

<input type="button" class="tab" value="Tab"/>

i want to make a button class tab.on clicking the button it does same work that of a tab button in keyboard — user4545954, Feb 09 '15 at 11:10
So you want to simulate a tab press by clicking a button? where the tab have to appear? in every input field or in a specific one? — kasper Taeymans, Feb 09 '15 at 11:16
possible duplicate of [Simulate pressing tab key with jQuery](http://stackoverflow.com/questions/9214125/simulate-pressing-tab-key-with-jquery) — jbutler483, Feb 09 '15 at 11:25

jbutler483 · Answer 1 · 2015-02-09T11:23:02.360

Below is a simple snippet to show how you can utilise JQuery to display an 'active' tab by clicking on one.

$('.tab').click(function(){
  $('.tab').removeClass("active");
  $(this).addClass("active");
  });

.tab{
  display:inline-block;
  background:blue;
  height:50px;
  width:100px;
  }
.active{
  background:red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab">1</div>
<div class="tab">2</div>
<div class="tab">3</div>
<div class="tab">4</div>
<div class="tab">5</div>

Below is a snippet showing this using a button and iterating through them.

$('.but').click(function() {
  var len = $('.parent').children().length;
  var next = $('.active').next();
  var thi = next.index();
  $('.tab').removeClass("active");
  if (thi != -1) {
    $(next).addClass("active");
  } else {
    $('.parent').children().first().addClass("active");
  }
});

.tab {
  display: inline-block;
  background: blue;
  height: 50px;
  width: 100px;
}
.active {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="tab active">1</div>
  <div class="tab">2</div>
  <div class="tab">3</div>
  <div class="tab">4</div>
  <div class="tab">5</div>
</div>
<button class="but">click me!</button>

I think the OP is looking for an event to fire on specific keypress, in this case "tab". Going by this response to my question "i want to make a button class tab.on clicking the button it does same work that of a tab button in keyboard " — Master Yoda, Feb 09 '15 at 11:14
no i wan t the event to fire on clicking a button in a web page whose functionality is same as tab button — user4545954, Feb 09 '15 at 11:15

score 0 · Accepted Answer · edited May 23 '17 at 12:13

Inspired with this answer from lee, by selecting 'focusable' elements (and knowing which one is currently in focus) we can simulate TAB press and move focus to next one. Fiddle example here, using following HTML:

<fieldset class="tab_area">
    <legend>Tab works here</legend>
    <p><input type="text" /></p>
    <p><input type="text" /></p>
    <p><input type="text" /></p>
    <p>More info <a href="#" title="Link">here</a></p>
    <p>
        <select>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
        </select>
    </p>
</fieldset>
<p><input type="button" class="tab" value="Click me to Tab" /></p>

and JS:

var focusAbles = $('.tab_area').find('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]');
$('.tab').on('mousedown', function (e) {
    e.preventDefault();
    var inFocus = $(':focus');
    if (inFocus.length) {
        var focusIndex = focusAbles.index(inFocus);
        if (focusIndex + 1 < focusAbles.length) {
            focusAbles.eq(focusIndex + 1).focus();
        } else {
            focusAbles.eq(0).focus();
        };
    } else {
        focusAbles.eq(0).focus();
    };
});

score 0 · Answer 3 · answered Feb 09 '15 at 12:18

Try the below code 

**HTML**

<input type="text" data-tab-index="1" class="answer ans4" style="border-color:#000;"></br></br>
<input type="text" data-tab-index="2" class="answer ans5" style="border-color:#000;"></br></br>
<input type="text" data-tab-index="3" class="answer ans6" style="border-color:#000;"></br></br>

<input type="button" class="tab"id="btnTab" value="Tab"/>

**Java Script**

$(document).ready(function() {
    var tabIndex = 0;
    $("#btnTab").click(function(e) {
        setFocus();
    });

    function setFocus() {

        var isFocusDone = false;
        $(".answer").each(function(index) {
            var dataTabIndex = parseInt($(this).attr("data-tab-index"));
            if ((tabIndex + 1) == dataTabIndex) {
                $(this).focus();
                tabIndex = dataTabIndex;
                isFocusDone = true;
                return false;
            }
        });

        if (!isFocusDone) {
            $(".answer").each(function(index) {
                var dataTabIndex = parseInt($(this).attr("data-tab-index"));
                if (dataTabIndex == 1) {
                    $(this).focus();
                    tabIndex = dataTabIndex;
                    return false;
                }
            });
        }
    }

});

i want a button in my html page on clicking the button it works same as a tab button

3 Answers3