Question

I have this fiddle, when I press tab, the focus should be set on next element, but its not..
Here’s the code..

<input type="text" style="font-size:12px;width:245px;" border-style="Solid" tabindex="3" id="txtCAddress" maxlength="100" name="txtCAddress" />
</br>

<input type="text" style="font-size:12px;width:245px;" border-style="Solid" tabindex="4" id="txtMobile" name="txtMobile"/>

</br>

<input type="text" style="font-size:12px;width:245px;" border-style="Solid" id="txtPriority" maxlength="300" name="txtPriority" tabindex="5" autocomplete="off" />

The js is

$(document).ready(function(event) {
    $('#txtCAddress').keydown(function(e) {
        if ((e.which == 9)) {
            if ($('#txtCAddress').val() == '') {
                alert('me');
            }
        }
    });
});

When I press tab in txtCAddress with some text, its okay, the focus is getting set on txtMobile as excepted, but when I press tab in txtCAddress without any text, the alert is coming fine, but the focus is getting set on txtPriority?

Why is the focus not on txtMobile?

EDIT
The js fiddle

http://jsfiddle.net/sXaMG/1/

Answer 1

You should not use alert() in keydown function callback as its override event default behaviour, use console.log() instead.
From that, seems to work perfectly.