当前位置: 首页 > 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.dtcms.com/a/198382.html

相关文章:

  • 计算机图形学编程(使用OpenGL和C++)(第2版)学习笔记 13.几何着色器(一)修改顶点
  • React Flow 边事件处理实战:鼠标事件、键盘操作及连接规则设置(附完整代码)
  • 学习黑客HTTP(HyperText Transfer Protoco)
  • 从代码学习深度学习 - 近似训练 PyTorch版
  • [强化学习的数学原理—赵世钰老师]学习笔记02-贝尔曼方程-下
  • 【AWS】从 0 基础直觉性地理解 IAM(Identity and Access Management)
  • CudaMemCpy returns cudaErrorInvalidValue
  • 《Vite 报错》ReferenceError: module is not defined in ES module scope
  • 学习黑客Active Directory入门
  • 重读《人件》Peopleware -(10-2)Ⅱ 办公环境 Ⅲ 节省办公空间的费用(下)
  • 多头自注意力机制—Transformer模型的并行特征捕获引擎
  • 打卡Day29
  • Vue百日学习计划Day24-28天详细计划-Gemini版
  • C++中的容器
  • Spring Boot JWT认证示例项目
  • 怎样免费开发部署自己的网站?
  • react深入2 - react-redux
  • MySQL——6、内置函数
  • 2025年- H31-Lc139- 242.回文链表(快慢指针)---java版--需2刷
  • c++编写中遇见的错误
  • 如何利用DeepSeek提升工作效率
  • LaTeX OCR - 数学公式识别系统
  • matlab分段函数
  • 大模型解析:AI技术的现状、原理与应用前景
  • Ubuntu搭建NFS服务器的方法
  • 【Linux】第十八章 调优系统性能
  • 面试中的线程题
  • 系统架构设计(十二):统一过程模型(RUP)
  • 【设计模式】- 行为型模式2
  • 深度解析:AWS NLB 与 ALB 在 EKS 集群中的最佳选择