Keydown event does not fire correctly using jQuery trigger

Question

Please review this code:

<input name="TextBox1" type="text" value="1111111111" id="TextBox1" />
<br />
<input name="TextBox2" type="text" value="222222222" id="TextBox2" />
<br />
<input name="TextBox3" type="text" value="3333333333" id="TextBox3" />
<br />
<input name="TextBox4" type="text" value="4444444444" id="TextBox4" />
<br />
<select name="DropDownList1" id="DropDownList1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<br />
<input id="CheckBox1" type="checkbox" name="CheckBox1" />
<label for="CheckBox1">nima</label>
<br />
<input id="Button1" type="button" value="button" />

and javascript:

$(document).ready(function () {
        $("#Button1").click(function () {
            var e = jQuery.Event("keydown");
            e.which = 9; // # Some key code value
            e.keyCode = 9;
            $("#TextBox1").trigger(e);
        });

        $("#TextBox1").on("keydown", function (e) {
            alert(e.keyCode);
        });
    });

the problem is that when I click TABon TextBox1, I get the message "9" for keyCodeand Textbox2to get focus. but when I click Button1, I get the message "9" for keyCodebut Textbox2does not get focus. Where is my mistake? thank

Live demo

Answer 1

, TAB , . TAB, , , , ( tabIndex).

TAB, input.

, #TextBox1 #TextBox2, jQuery blur() focus():

$("#TextBox1").on("keydown", function (e) {
    if (e.which === 9) {
        $(this).blur();
        $('#TextBox2').focus();
    }
});

JSFiddle.