javascript - 使用 jQuery 触发器无法正确触发 keydown 事件

Question

请考虑这段代码:

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

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

问题是当我在 TextBox1 上按 TAB 时，我收到 keyCode 和 Textbox2 的消息“9”获得焦点。但是当我按下 Button1 时，我收到 keyCode 的消息“9”，但 Textbox2 没有获得焦点。我的错误在哪里？ 谢谢

Live Demo

Answer 1

错误在于您实际上并没有自己处理 TAB 键，浏览器才是。在一个交互式元素具有焦点时按 TAB 将通知浏览器您希望将焦点移到行中的下一个元素(基于 tabIndex)。

这里的按钮实际上并不是按下 TAB 键，而是将 tab 事件传递给 input 元素。

如果您希望此操作模糊 #TextBox1 元素并聚焦 #TextBox2 元素，您可以使用 jQuery 的 blur() 和 focus() 函数:

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

JSFiddle demo .