1

Search after 2 hours on internet couldn't find something I want.

Here is my question: How can I create a button which acts like "Tab key" and "Shift + tab Key" it focus next input text or previous and first time press will focus first input.

something like this: 

<div class="inputs">
    <input type="text" tabindex="1"/>
    <input type="text" tabindex="2" />
    <input type="text" tabindex="3" />
    <input type="text" tabindex="4" />
    <button>Tab(Go next input to Focus)</button>
    <button>Shift + Tab (fo Previous input to focus)</button>
</div>

sorry for bad presenting my question and english

Mikey Xuan
  • 41
  • 8
  • What do you expect it to do when current focus is on `#4`? Jump to the `Tab` button? – Bergi Apr 22 '13 at 18:27
  • well on the page have many inputs so if it last one then it can turn back to first input it will good for me, because i have 50 input on a page so it will long input page with a custom focus jumper. – Mikey Xuan Apr 22 '13 at 18:47
  • Thanks for showing me other sources but I'm really new on coding. Can any1 write simple cope example? – Mikey Xuan Apr 22 '13 at 18:58
  • Voted for reopening cause the OP needs differ from the suggested "clone" – Roko C. Buljan Apr 22 '13 at 19:59

1 Answers1

1

If you first store the input that has the focus into a var than it's really simple:

LIVE DEMO

var $curr;
$('.inputs input').on('focus',function(){
  $curr = $(this);
});
$('.prevTab, .nextTab').on('click', function( e ){
  $curr[ $(this).hasClass("nextTab") ? "next" : "prev" ]('input').focus();
});

The bit more complicated line actually does

$curr.prev('input').focus(); or $curr.next('input').focus(); depending on which button is clicked using a simple Ternary Operator logic:

if .nextTab is clicked ["next"] will be used
if .prevTab is clicked ["prev"] will be used

considering that the notations

$curr["next"]() is the same as $curr.next() method
$curr["prev"]() is the same as $curr.prev() method

just using brackets insted of dot notation.

Than we're just ensuring that the prev or next element is actually an input using:

 ('input').focus(); // and set the focus to it!
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313