ASP.NET TextBox失去焦点后事件监听器丢失问题求助

ASP.NET WebForms的TextBox出现事件监听器丢失，核心原因通常是页面局部/全局回发导致控件DOM被重新渲染，初始绑定的事件监听器会随原有DOM节点被销毁而失效；另外你的原生JS代码本身也存在变量作用域和语法错误，会导致功能异常。

1. 适配ASP.NET回发机制，使用pageLoad替代DOMContentLoaded #

ASP.NET的pageLoad函数会在初始页面加载和每次UpdatePanel回发完成后都执行，能确保控件重新渲染后事件被重新绑定。

2. 修复JS代码的作用域与语法错误 #

• 原positionAtEndOfText函数无法访问node变量（因为node是初始加载回调内的局部变量），需要将node作为参数传入，或者调整作用域。
• 函数内的value.length是未定义变量，要改为text.length。

3. 修正后的完整代码 #

<!-- ASP.NET控件部分 -->
<asp:TextBox ID="TxtAccountName" runat="server"></asp:TextBox>
<asp:HiddenField ID="HFAccName" runat="server"></asp:HiddenField>

<script type="text/javascript">
// 适配ASP.NET回发的pageLoad函数
function pageLoad() {
  // 获取ASP.NET控件的客户端ID
  let node = document.getElementById('<%= TxtAccountName.ClientID %>');
  let hidden = document.getElementById('<%= HFAccName.ClientID %>');

  // 先移除原有事件（避免重复绑定）
  node.removeEventListener('keydown', handleKeyDown);
  node.removeEventListener('keyup', handleKeyUp);
  node.removeEventListener('input', handleInput);

  // 重新绑定事件
  node.addEventListener('keydown', handleKeyDown);
  node.addEventListener('keyup', handleKeyUp);
  node.addEventListener('input', handleInput);

  // 定义事件处理函数（内部可访问node变量）
  function handleKeyDown(e) {
    console.log("触发keydown事件");
    if (node.selectionStart !== node.value.length) {
      e.preventDefault();
      positionAtEndOfText(node);
    }
  }

  function handleKeyUp(e) {
    console.log("触发keyup事件");
    let text = node.value;
    // 保存真实文本到隐藏域（掩码后原内容会丢失）
    hidden.value = text;
    if (text.length > 3) {
      node.value = text.substring(0, 3) + '*'.repeat(text.length - 3);
      // 掩码后重新定位光标到末尾
      positionAtEndOfText(node);
    }
  }

  function handleInput(e) {
    console.log("触发input事件");
    if (node.selectionStart !== node.value.length) {
      e.preventDefault();
      positionAtEndOfText(node);
    }
  }
}

// 光标定位函数，接收控件节点作为参数
function positionAtEndOfText(node) {
  let text = node.value;
  node.focus();

  if (node.setSelectionRange) {
    node.setSelectionRange(text.length, text.length);
  } else if (node.createTextRange) {
    let range = node.createTextRange();
    range.collapse(true);
    range.moveEnd('character', text.length);
    range.moveStart('character', text.length);
    range.select();
  }
}
</script>

关键注意点 #

• 事件重复绑定问题：每次pageLoad执行时先移除原有事件再绑定，避免同一事件被多次触发。
• 真实文本保存：因为掩码会覆盖输入框的真实内容，必须把完整文本同步到HiddenField，后端才能获取到原始值。
• ClientID的正确使用：ASP.NET控件的客户端ID可能因NamingContainer（比如母版页、用户控件）改变，必须用<%= 控件ID.ClientID %>获取正确的前端ID。

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