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=".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/>

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

• javascript
• jquery

• I can't see any code... – Lelio Faieta Commented Apr 23, 2015 at 10:18
• apologies . pl check now – kandarp Commented Apr 23, 2015 at 10:18
• Because you set it so! – lshettyl Commented Apr 23, 2015 at 10:21
• I don't get your English – Mr. Alien Commented Apr 23, 2015 at 10:22
• Mr Alien. I m new in this world . It will improve , everybody go through this. – kandarp Commented Apr 27, 2015 at 5:52

5 Answers 5

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

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.

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

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

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