处理 input type=‘hidden‘ 的事件触发

前言

在公司的 MES 系统（摩尔元数N2）做二次开发页面。某个字段在表单模型中配置为弹出窗口后、页面的对应字段样式自动转为 <input type="hidden"> ，从而导致不能使用常规的 blur 、keydown 事件触发关联操作。下面是解决思路和成品代码。

用户诉求

主页面配置为弹出窗口的字段、在弹窗完成选择后，主页面可以根据对应字段值的变化，自动触发一些逻辑。（如：在主页面完成弹窗选择后、根据弹窗选择的值自动查询明细数据，并回填主页面的页签）

操作环境

用户软件是摩尔 MES 、前端页面库是 jQuery、浏览器是微软 Edge 、操作系统是 Windows 11 。

操作过程

首先在摩尔N2的“表单模型”管理界面找到对应表单模型 - 字段的配置项。如下图所示：

用户页面点选对应字段时、配置的弹窗来源如下图所示：

然后我想了下：既然字段中配置的回调函数可以让主页面的字段成功赋值、那么在该回调函数中，每次都主动触发主页面的 <input type="hidden"> ,再在主页面初始化时定义对应隐藏字段的事件绑定，不就成功了嘛。

说干就干，然后配置了下面的代码：

【1】对应字段弹窗选中回调函数

/**
* 【1】摩尔N2 - 表单模型 -对应字段弹窗选中回调函数
*/
function callbackFun(MKEY,val,obj){$("#paraMapObj_CD_DEVICE_SN").val(MKEY);$("#paraMapObj_CD_DEVICE_SN_SHOW").val(MKEY);
//begin 重点：
try{
console.log("尝试手动触发隐藏的 DEVICE_SN 变化！");$("#paraMapObj_CD_DEVICE_SN").val(MKEY).trigger("change");
} catch(e){
//弹窗配置下、需要每次手动触发，记录异常情况console.log(e);
}
//end 重点if(null!=obj){//主页面字段值赋值逻辑，略$("#paraMapObj_CD_DEVICE_NAME").val(obj.eq(4).text());}if($("#paraMapObj_CD_DEVICE_SN").val()==""){//主页面字段值清空逻辑，略}}

【2】主页面初始化时绑定

/**
* 【2】主页面初始化时- 绑定隐藏字段的 change 触发后逻辑
*/
$(function(){/*** add 24-03-22 * 【1】要在对应表单模型 - 字段的 “数据选择回调函数体” 中*  编写 <input type="hidden"> 的手动触发*  对应表单模型 - 字段的 “数据选择回调函数体” 中代码示例如下：*  try{ $("#paraMapObj_CD_DEVICE_SN").val(MKEY)*      .trigger("change"); }catch(e){ console,log(e); }* 【2】然后在主页面的初始化部分绑定  <input type="hidden"> 的*  触发逻辑，代码示例如下：*  $("input[type=\"hidden\"][id=\"paraMapObj_CD_DEVICE_SN\"]")*   .bind("change",function(){*	  *    });*/var tmpSN = "";// 此部分绑定隐藏的设备 SN 被触发后的逻辑$("input[type=\"hidden\"][id=\"paraMapObj_CD_DEVICE_SN\"]").bind("change",function(){tmpSN = $("#paraMapObj_CD_DEVICE_SN").val();console.log(">>>>updated device SN is :"+tmpSN);});//end add//其他略});

原理如下(滑稽)：

注意：手动触发 <input type="hidden"> 字段时，必须先赋值再触发。赋值的来源，可以重新获取一遍该字段的 value 属性、再用 jQuery 的 val(value) 函数赋值。然后主页面的绑定、需要在页面初始化时使用 jQuery(对应元素).bind("change",function(){ /*此处声明触发之后要做的动作*/ }) ; 的方法。

修改后效果如图：