CODEWITHSUNDEEP
javascriptjquery
kandarp
kandarp

Reputation: 1101

How to handle tab key using jquery

I have one form and on tab key press fields should be focus rotate be clear. Please see following code.

Jsfiddle run

    $('#e').keyup(function (e) {
        if (e.which === 9)
            $("#a").focus();
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type = "text" id = "a" name="a" /><br/>
<input type = "text" id = "b" name="b" /><br/>
<input type = "text" id = "c" name="c" /><br/>
<input type = "text" id = "d" name="d" /><br/>
<input type = "text" id = "e" name="e" /><br/>

when it go to field 'e' it directly go to 'a' that is ok . but it not wait at 'e' no need to get chance to enter in field 'e'

Please guide me.

Upvotes: 2

Views: 2360

Answers (5)

Roumelis George
Roumelis George

Reputation: 6746

I edited my answer to a correct one. Check this updated fiddle

//prevent default behavior
$(document).on('keydown', 'input[type="text"]', function(e) {
    if(e.keyCode === 9) {
      e.preventDefault();  
    }      
});

$(document).on('keyup', 'input[type="text"]', function(e) {

    if(e.keyCode === 9) {
        if($(this).index()+1 < $(this).siblings().length) {
            $(this).siblings().eq($(this).index()+1).focus();
            return false;
        }
        else {
            $(this).siblings().first().focus();
        }
    }
});

Upvotes: 0

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

The problem is that keyup event occurs after it has already moved the focus to the next field.

You need to do it on the keydown event instead:

    $('#e').keydown(function (e) {
        if (e.which === 9){
            $("#a").focus();
            e.preventDefault();
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type = "text" id = "a" name="a" /><br/>
<input type = "text" id = "b" name="b" /><br/>
<input type = "text" id = "c" name="c" /><br/>
<input type = "text" id = "d" name="d" /><br/>
<input type = "text" id = "e" name="e" /><br/>

The reason e.preventDefault(), or simply return false; is needed, is that the keydown will still move from the current focused control (i.e. from #a to #b)

If you want it more generic, forget the IDs and use :last and :first selectors

e.g.

    $('input:last').keydown(function (e) {
        if (e.which === 9){
            $("input:first").focus();
            e.preventDefault();
        }
    });

Upvotes: 5

lshettyl
lshettyl

Reputation: 8171

Here is another one that would work on indefinite set of inputs. Also, this doesn't rely on IDs.

var $inputs = $('input');
var $lastInput = $inputs.last();
$inputs.keydown(function (e) {
    if ( e.which === 9 && $lastInput.is(":focus") ) {
        $inputs.first().focus();
        e.preventDefault();
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type = "text" /><br/>
<input type = "text" /><br/>
<input type = "text" /><br/>
<input type = "text" /><br/>
<input type = "text" /><br/>
<input type = "text" /><br/>
<input type = "text" /><br/>
<input type = "text" /><br/>
<input type = "text" /><br/>
<input type = "text" /><br/>

Upvotes: 0

frontsideair
frontsideair

Reputation: 528

What you need is a keydown event, not keyup. The default behaviour of tab key is moving the next target on keydown as well.

$('#e').keydown(function (e) {
    if (e.which === 9) {
        e.preventDefault();
        $("#a").focus();
    }
});

See the updated fiddle.

Upvotes: 2

jmgross
jmgross

Reputation: 2336

You have to change your listened event and don't forget to stop event propagation

$('#e').keydown(function (e) {
    if (e.which === 9) {
        $("#a").focus();
        e.preventDefault();
    }
});

jsFiddle

Upvotes: 1

Related Questions