当前位置: 首页 > news >正文

给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) {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事件。

http://www.xdnf.cn/news/515971.html

相关文章:

  • 翻译:20250518
  • Go 后端中双 token 的实现模板
  • 需求与实际业务需求脱节,怎么办?
  • 安卓端互动娱乐房卡系统调试实录:从UI到协议的万字深拆(第一章)
  • QT学习3
  • Socket.IO是什么?适用哪些场景?
  • 基于马尔可夫链的状态转换,用概率模型预测股市走势
  • 2025年- H31-Lc139- 242.回文链表(快慢指针)---java版--需2刷
  • 新型太空电梯——半摆卫星太空电梯 的设计与验证
  • 【Python数据处理系列】输入txt,读取特定字符转换成特定csv数据并输出
  • PointNet++:点云处理的升级版算法
  • WebSocket实时双向通信:从基础到实战
  • 3:OpenCV—视频播放
  • 彻底解决docker代理配置与无法拉取镜像问题
  • 第二章 苍穹外卖
  • Git基础原理和使用
  • 区间带边权并查集,XY4060泄露的测试点
  • elementplus menu 设置 activeindex
  • GO语言语法---For循环、break、continue
  • 计算机组成与体系结构:Snooping-Based Protocols(监听式协议)
  • STM32 OTA 中断向量表重定向
  • Unity3D仿星露谷物语开发45之收集农作物特效
  • 第四天的尝试
  • 【网络】Wireshark练习3 analyse DNS||ICMP and response message
  • 2021ICPC四川省赛个人补题ABDHKLM
  • DeepSeek本地部署全攻略:从零搭建到Web可视化及数据训练
  • AM32电调学习解读八:无感驱动相位波形解析
  • STK手动建链+matlab联调
  • 小麦病害分割数据集labelme格式1882张4类别
  • BGP策略实验练习