Chrome等浏览器序列号输入框无法自动填充问题求助

去年Chrome更新后，原有JavaScript代码无法正常运行。该功能在IE中可正常工作，但在Firefox、Edge、Chrome中全部失效：从下拉菜单选择特定零件（通过pcpSelect变量获取）时，对应序列号本该自动填充到输入框，现在DOM操作异常，功能被阻止。

错误截图显示：选择零件后序列号输入框未正确填充，控制台存在DOM操作相关报错

相关JavaScript代码 #

function fillSerial()
{
    var pcpSelect = document.frm_CreatePCP.PCP_ID.selectedIndex;
    var PCP = document.frm_CreatePCP.PCP_ID(pcpSelect).value;
    //alert(PCP);
    for (var i = 1; i < PCP_array.length; i++) 
    {
        if ( PCP == PCP_array[i] )
            {
            document.frm_CreatePCP.sn.value = Number(Serial_array[i]) +1;
            document.frm_CreatePCP.sn.refresh;
            document.frm_CreatePCP.part.value=PCP;
            //document.getElementById("openserial").onclick="javascript:void window.open('selectExistSerial.cfm?pcp_id='+PCP+','1351625603240','width=300,height=150,resizable=1,left=650,top=300');" ;
            document.getElementById("openserial").disabled = false;
            break;
            
            }
    }
}

function openSerialWindow()
{
    var pcpSelect = document.frm_CreatePCP.PCP_ID.selectedIndex;
    var PCP = document.frm_CreatePCP.PCP_ID(pcpSelect).value;
    if (PCP.length < 1) {
        alert ("Part is required");
        document.frm_CreatePCP.PCP_ID.focus();
        }
    else
    {
    //alert(PCP);
    //mywindow = window.open("'selectExistSerial.cfm?pcp_id='+PCP+','1351625603240','width=300,height=150,resizable=1,left=650,top=300'");
    mywindow = window.open('selectExistSerial.cfm?pcp_id='+PCP,'mywindow','width=650,height=350,resizable=1,left=650,top=300,scrollbars=1');
    }
}

相关HTML代码 #

<form action="man_insp_enter_serial.cfm" name="frm_CreatePCP" method="post" > <!-- changed name to id name="frm_CreatePCP" -->
    <input type="hidden" name="part" value="<cfoutput>#form.part#</cfoutput>">
    <table border="1" cellpadding="6" cellspacing="2" align="center" >
        <tr>
            <td align="center"  colspan="2" bgcolor="#CCCCCC"><div class="bluem" >Start Manual Inspection Template</div></td></tr>
        <tr>
            <td align="center"  >
                <b>Part:&nbsp;&nbsp;</b>
                <select name="PCP_ID" onchange="fillSerial();" >
                    <option value="">Choose One</option>
                    <SCRIPT language=JavaScript type="text/javascript">
                        var Serial_array = new Array();
                        var PCP_array = new Array();
                    </SCRIPT>               
                    <cfset j=1>
                    <cfoutput query="qryAporvedPCP">
                        <option value="#qryAporvedPCP.PCP_ID#" <cfif qryAporvedPCP.PCP_ID eq form.part> selected </cfif> >#qryAporvedPCP.PARTNUM#</option>
                        <SCRIPT language=JavaScript type= "text/javascript" >
                            Serial_array[#j#] = "#qryAporvedPCP.MAX_SERIAL#";
                            PCP_array[#j#] = "#qryAporvedPCP.PCP_ID#";
                        </SCRIPT>
                        <cfset j=j+1>
                        <!-- <cfset ary_PCP_ID = ListToArray( valueList(qryAporvedPCP.PCP_ID) ) >
                        <cfset ary_SERIAL = ListToArray( valueList(qryAporvedPCP.MAX_SERIAL) ) > -->
                        </cfoutput>
                </select>
                </td>
                <td >Serial Number: <input type="text" name="sn" size="7" maxlength="7" style="text-transform:uppercase; text-align:center; font-weight:bold" onkeypress="return isNumberDecKey(event);" value="" />&nbsp;<input type="button" name="openSerial" value ="S/N Used"  onclick="javascript: openSerialWindow()" ></td>
            <input type="hidden" name="freq" value="0"  />
            <input type="hidden" name="temp" value="68"  />
        </tr>
    </table>
</form>

解决建议 #

1. 修复下拉选项获取方式
   原代码中document.frm_CreatePCP.PCP_ID(pcpSelect)是IE专属写法，现代浏览器不支持用函数调用访问下拉框选项，需改为标准写法：

   var PCP = document.frm_CreatePCP.PCP_ID.options[pcpSelect].value;
   

2. 移除无效的refresh调用
   document.frm_CreatePCP.sn.refresh是IE私有方法，现代浏览器无此API，直接删除该行即可，输入框赋值后会自动更新显示。

3. 统一DOM元素获取逻辑（可选优化）
   建议使用标准的document.getElementById()或document.querySelector()获取元素，避免依赖旧的表单命名访问方式。比如给表单和元素添加id属性：

   <form id="frm_CreatePCP" ...>
   <select id="PCP_ID" ...>
   <input id="sn" ...>
   

   后续JS中用document.getElementById('PCP_ID')获取元素，兼容性更强。

4. 检查数组索引一致性
   确认PCP_array和Serial_array的长度一致，避免循环时出现索引越界问题。

5. 查看控制台报错
   打开Chrome开发者工具（F12）的Console面板，查看具体报错信息，排查是否有其他兼容性问题（如变量未定义、跨域等）。

修改后的核心函数示例 #

function fillSerial()
{
    var pcpSelect = document.frm_CreatePCP.PCP_ID.selectedIndex;
    var PCP = document.frm_CreatePCP.PCP_ID.options[pcpSelect].value;
    for (var i = 1; i < PCP_array.length; i++) 
    {
        if (PCP === PCP_array[i])
        {
            document.frm_CreatePCP.sn.value = Number(Serial_array[i]) + 1;
            document.frm_CreatePCP.part.value = PCP;
            document.getElementById("openserial").disabled = false;
            break;
        }
    }
}

function openSerialWindow()
{
    var pcpSelect = document.frm_CreatePCP.PCP_ID.selectedIndex;
    var PCP = document.frm_CreatePCP.PCP_ID.options[pcpSelect].value;
    if (PCP.length < 1) {
        alert("Part is required");
        document.frm_CreatePCP.PCP_ID.focus();
    }
    else
    {
        mywindow = window.open('selectExistSerial.cfm?pcp_id='+PCP,'mywindow','width=650,height=350,resizable=1,left=650,top=300,scrollbars=1');
    }
}

内容的提问来源于stack exchange，提问作者Plumbboy77