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(),效果如下：

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