填充txtInstantieName文本框后失焦触发InstantieDetailButton点击的jQuery实现

现有页面结构 #

当前页面包含两个核心交互元素：id为txtInstantieName的文本输入框、id为InstantieDetailButton的功能按钮，对应页面代码如下：

<div class="row" style="padding-bottom:12px;">
    <div class="col-md-2">
        <div>Instantie</div>
    </div>
    <div class="col-md-4">
        @Html.TextBoxFor(model => model.Instantie, new { @id = "txtInstantieName", @class = "form-control tt-input", @style = "text-transform:uppercase;" })
    </div>
    <div class="col-md-1">
        <button type="button" id="InstantieDetailButton">...</button>
    </div>                 
</div>

需求说明 #

需要在文本框内容填写完成后，触发以下操作时自动执行按钮的点击事件：

• 光标移出文本框
• 按下Tab键切走焦点
• 按下Enter键

实现代码 #

经测试可正常运行的jQuery实现代码如下：

$(document).ready(function () {
    // 监听失焦事件，覆盖光标移出、按Tab键切走焦点的场景
    $("#txtInstantieName").focusout(function () {
        $("#InstantieDetailButton").click();
    });
    // 可选补充：监听回车键按下事件，适配回车触发场景（如果默认回车不会自动失焦可添加这段）
    $("#txtInstantieName").on("keydown", function(e) {
        if (e.key === "Enter" || e.keyCode === 13) {
            $(this).blur();
        }
    });
});

内容的提问来源于stack exchange，提问作者Rahul J