JS踩坑标注：input控件的ONINPUT方法

问题描述：添加联动配置按钮，一次性添加4行联动配置，需要保证联动配置名称相同，所以打算在配置第一条联动配置名称时将该名称同步到余下3个联动配置。

初始页面：

点击添加联动配置按钮：

联动配置名称为input控件，打算用oninput方法同步联动控制名称。上代码

<!--添加联动配置按钮-->
<a href="#" class="btn btn-success btn-icon-split" data-toggle="modal" onclick="onAddLinkage()" style="margin-left: 10px"><!--data-target="#addPodModal"--><span class="icon text-white-50" ><i class="fas fa-plus"></i></span><span class="text" >添加联动配置</span>
</a>

//按钮触发接口
function onAddLinkage()
{if(arr_NodeDev.length == 0){alert("请添加节点设备");return;}if(arr_MeasPoint.length == 0){alert("请添加测点");return;}linkageTableRemoveAll();//添加联动配置的4行控件linkageTableAddNullGroup();
}function test()
{var val = document.getElementById('linkageName1').value;document.getElementById('linkageName2').value = val;document.getElementById('linkageName3').value = val;document.getElementById('linkageName4').value = val;
}function linkageTableAddNullGroup()
{var table = document.getElementById('linkage_cfg_table');var vPosWidth="14%";var row = document.createElement('tr');row.dbFlag = false;var cell = document.createElement('td');cell.innerHTML="<input id='linkageName1' type='text' value='' οninput='test()' style='height:99%'/>";row.appendChild(cell);linkageSelectBoxAdd(row,vPosWidth,arr_TriggerType,'');linkageSelectBoxAdd(row,vPosWidth,arr_NodeDev,'');linkageMeasPointSelectBoxAdd(row,vPosWidth,arr_NodeDev[0][0],'');linkageSelectBoxAdd(row,vPosWidth,arr_TriggerCot,'');cell = document.createElement('td');cell.innerHTML="<input type='text' value='' style='height:99%'/>";row.appendChild(cell);linkageSelectBoxAdd(row,vPosWidth,arr_Capture,'');table.appendChild(row);var row2 = document.createElement('tr');row2.dbFlag = false;var cell2 = document.createElement('td');cell2.innerHTML="<input id='linkageName2' type='text' style='height:99%'/>";row2.appendChild(cell2);linkageSelectBoxAdd(row2,vPosWidth,arr_TriggerType,'');linkageSelectBoxAdd(row2,vPosWidth,arr_NodeDev,'');linkageMeasPointSelectBoxAdd(row2,vPosWidth,arr_NodeDev[0][0],'');linkageSelectBoxAdd(row2,vPosWidth,arr_TriggerCot,'');cell2 = document.createElement('td');cell2.innerHTML="<input type='text' value='' style='height:99%'/>";row2.appendChild(cell2);linkageSelectBoxAdd(row2,vPosWidth,arr_Capture,'');table.appendChild(row2);var row3 = document.createElement('tr');row3.dbFlag = false;var cell3 = document.createElement('td');cell3.innerHTML="<input id='linkageName3' type='text' style='height:99%'/>";row3.appendChild(cell3);linkageSelectBoxAdd(row3,vPosWidth,arr_TriggerType,'');linkageSelectBoxAdd(row3,vPosWidth,arr_NodeDev,'');linkageMeasPointSelectBoxAdd(row3,vPosWidth,arr_NodeDev[0][0],'');linkageSelectBoxAdd(row3,vPosWidth,arr_TriggerCot,'');cell3 = document.createElement('td');cell3.innerHTML="<input type='text' value='' style='height:99%'/>";row3.appendChild(cell3);linkageSelectBoxAdd(row3,vPosWidth,arr_Capture,'');table.appendChild(row3);var row4 = document.createElement('tr');row4.dbFlag = false;var cell4 = document.createElement('td');cell4.innerHTML="<input id='linkageName4' type='text' style='height:99%'/>";row4.appendChild(cell4);linkageSelectBoxAdd(row4,vPosWidth,arr_TriggerType,'');linkageSelectBoxAdd(row4,vPosWidth,arr_NodeDev,'');linkageMeasPointSelectBoxAdd(row4,vPosWidth,arr_NodeDev[0][0],'');linkageSelectBoxAdd(row4,vPosWidth,arr_TriggerCot,'');cell4 = document.createElement('td');cell4.innerHTML="<input type='text' value='' style='height:99%'/>";row4.appendChild(cell4);linkageSelectBoxAdd(row4,vPosWidth,arr_Capture,'');table.appendChild(row4);
}

上述代码中input控件linkageName1的oninput事件若接口名含大写字母，则该接口不能被触发！
效果如下：

全为小写字母：test(),效果如下：

非专业前端，这个坑填了一天，特此立贴。

JS踩坑标注：input控件的ONINPUT方法相关推荐

js 与 asp.net 验证控件冲突解决方法
首先在<script>中写入 function CheckClientValidate() { if (Page_IsValid) { return true ...
js给input控件添加onkeypress属性
js给input控件添加onkeypress属性在前台直接添加onkeypress可以实现. <ul class="r1"><li><span> ...
Vue中video.js踩坑日记单页切换后视频无法播放
使用video.js踩坑.单页切换后视频无法播放切换页面以后正常显示效果但是我切换路由返回上一层或者点击跳转下个页面的返回的时候就不显示了?? 解决思路在生命周期beforeDestroy函数中 ...
小程序中点击input控件键盘弹出时placeholder文字上移
最近做的一个小程序项目中,出现了点击input控件键盘弹出时placeholder文字上移,刚开始以为是软键盘弹出布局上移问题是传说中典型的fixed 软键盘顶起问题,因此采纳了网上搜到的" ...
用html+css+js实现一个无限级树形控件
题目描述: 用html+css+js实现一个无限级树形控件,功能如下: 1.利用html.css展示一个树形菜单 2.点击箭头图标展开子项 3.点击父节点勾选图标能全选或全取消,点击叶节点勾选图标可以 ...
Next.js踩坑入门系列（七） —— 其他相关知识
Next.js踩坑入门系列 (一) Hello Next.js (二) 添加Antd && CSS (三) 目录重构&&再谈路由 (四) Next.js中期填坑 (五) ...
QT实现Qt Quick和three.js渲染和实现QML3D控件
QT实现Qt Quick和three.js渲染和实现QML3D控件项目简介项目技术项目展示主要源码片段解析获取完整项目源码传送门项目简介结合Qt Quick和three.js渲染. 演示 ...
使用Angular可重用Component思路实现一个自带图标(icon)的input控件
参考链接:Angular ng-content and Content Projection: A Complete Guide - How To Use ng-content To Improve ...
ASP.NET MVC CheckBoxFor为什么会生成hidden input控件
自己开发的公众号,可以领取淘宝内部优惠券 @Html.CheckBoxFor(m => m.Bool) 使用CheckBoxFor方法得到的html代码会是下面这个样子 <input ch ...

JS踩坑标注：input控件的ONINPUT方法

JS踩坑标注：input控件的ONINPUT方法相关推荐

最新文章

热门文章