ASCX用户控件中textbox的onkeyup事件不生效问题咨询

首先明确：不需要将sync函数写到母版页，JS代码放在ASCX文件中完全可以正常运行，功能失效的核心原因是Web Form服务端控件的客户端ID自动篡改机制。

核心问题 #

你给input标签加了runat="server"属性，当控件放在ASCX用户控件/母版页嵌套结构中时，ASP.NET会自动给渲染到前端的ID加上父容器前缀，比如最终前端实际ID会变成ctl00_ContentPlaceHolder1_你的用户控件ID_TestAmountTextBox，直接用document.getElementById('TestAmountTextBox')会返回null，函数执行无效果甚至报错。

修复方案（任选其一即可） #

方案1：固定服务端控件的客户端ID #

给两个input标签添加ClientIDMode="Static"属性，强制渲染时ID和你定义的服务端ID保持一致，原有JS逻辑不需要修改：

<input type="text" runat="server" id="TestAmountTextBox" ClientIDMode="Static" class="form-control currency-input" placeholder="From " aria-label="From Transaction Amount" data-allownegative="true" style="width: 100px;" maxlength="14" tabindex="7" onkeyup="sync()"/>                                                         
<input type="text" runat="server" id="TestAmountTextBox_2" ClientIDMode="Static" class="form-control currency-input" placeholder="To " aria-label="To Transaction Amount" data-allownegative="true" style="width: 100px;" maxlength="14" tabindex="13" />

方案2：JS中动态获取服务端控件的实际客户端ID #

修改sync函数，用ASP.NET内嵌表达式输出控件的真实前端ID，不需要修改input标签：

function sync() {
    var TextBoxA1 = document.getElementById('<%= TestAmountTextBox.ClientID %>');
    var TextBoxA2 = document.getElementById('<%= TestAmountTextBox_2.ClientID %>');
    // 加判空逻辑避免未加载完成时报错
    if(TextBoxA1 && TextBoxA2) {
        TextBoxA2.value = TextBoxA1.value;
    }
}

其他可选排查点 #

如果修改后还是不生效，可以按以下顺序排查：

• 按F12打开浏览器控制台，查看是否有sync未定义报错，存在该报错说明你的JS代码位置不对，需确保JS代码放在input标签的下方，或者放在页面DOMContentLoaded事件的回调中
• 检查是否有其他JS代码覆盖了sync函数定义，可修改函数名比如改成syncTestAmount避免重名冲突

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