处理 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(){ /*此处声明触发之后要做的动作*/ }) ; 的方法。

修改后效果如图：

结论

<input type="hidden">  的隐藏字段不能直接使用 blur、keyup 、keydown 事件。需要在页面其他一个可以操作的元素绑定 onclick / onchange / .. 等事件，该元素每次被操作时、手动触发对应隐藏字段的 change 事件。

（完）