给easyui的textbox绑定回车事件

项目有一个textbox输入框，需要绑定一个回车搜索事件。

一开始想着，直接使用js的on或者jquery的keydown方法直接绑定，但是事件不生效。

$("#propName").textbox({
    width: 200,
    prompt: "请输入物品名称进行搜索"
}).keydown(function() {
    if(event.keyCode === 13) {
        let rowData = $("#role_list").datagrid("getSelected");

        if (rowData) {
            let roleId = rowData.id;

            ajaxGet("/repository_prop/selectByName", {
                name: name,
                roleId: roleId
            }, function (resp) {
                let data = resp.data;

                if (data.length > 0) {
                    // todo：展示查询结果
                } else {
                    let message = "少侠没有该物品哦！";

                    alertMsg(message);
                }
            }, error);
        }
    }
});

通过F12查看到输入框已经被绑定了两个keydown事件。

于是，就先解绑keydown事件，然后再重新绑定：

$("#propName").textbox({
    width: 200,
    prompt: "请输入物品名称进行搜索"
}).unbind("keydown").keydown(function() {
    if(event.keyCode === 13) {
        let rowData = $("#role_list").datagrid("getSelected");

        if (rowData) {
            let roleId = rowData.id;

            ajaxGet("/repository_prop/selectByName", {
                name: name,
                roleId: roleId
            }, function (resp) {
                let data = resp.data;

                if (data.length > 0) {
                    // todo：展示查询结果
                } else {
                    let message = "少侠没有该物品哦！";

                    alertMsg(message);
                }
            }, error);
        }
    }
});

气人的是，还是绑定失败了！！！

一怒之下，我点开easyui的源代码，发现easyui的textbox组件有这么一个事件属性：

inputEvents: {
    blur: function (e) {
        var t = $(e.data.target);
        var opts = t.textbox("options");
        if (t.textbox("getValue") != opts.value) {
            t.textbox("setValue", opts.value);
        }
    }, 
    keydown: function (e) {
        if (e.keyCode == 13) {
            var t = $(e.data.target);
            t.textbox("setValue", t.textbox("getText"));
        }
    }
},

上面的这个代码没看懂，但是像是easyui通过这种方式管理了组件的keydown事件。

最后，直接把源代码里的inputEvents属性重新定义，保留原来的blur事件。

$("#propName").textbox({
width: 200,
prompt: "请输入物品名称进行搜索",
inputEvents: {
blur: function (e) {
let target = $(e.data.target);
let opts = target.textbox("options");

if (target.textbox("getValue") !== opts.value) {
target.textbox("setValue", opts.value);
}
},
keydown: function (event) {
                // 如果不加下面这两行代码，失去焦点才会触发这个事件
                let target = $(event.data.target);

target.textbox("setValue", target.textbox("getText"));

if(event.keyCode === 13) {
let rowData = $("#role_list").datagrid("getSelected");

if (rowData) {
let roleId = rowData.id;

ajaxGet("/repository_prop/selectByName", {
name: name,
roleId: roleId
}, function (resp) {
let data = resp.data;

if (data.length > 0) {
// todo：展示查询结果
} else {
let message = "少侠没有该物品哦！";

alertMsg(message);
}
}, error);
}
}
}
}
});

经过一番尝试，终于成功绑定了keydown事件。

原文地址：https://blog.csdn.net/heyl163_/article/details/148051190

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！