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收到消息“9”并且Textbox2获得焦点。但是，当我按Button1时，我会收到keyCode的消息“9”，但Textbox2无法获得焦点。我的错误在哪里？感谢

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 demo

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

1 个答案: