ASP.NET WebForms中UpdatePanel内TextBox仅失焦触发TextChanged问题解决

默认情况下，AutoPostBack="true"的ASP.NET TextBox只会在文本框失焦且内容改变时触发OnTextChanged事件。要实现文本一变化就触发服务器端事件，需要通过客户端JavaScript监听实时文本变化事件，并主动触发回发。

修改方案 #

在TextBox上添加客户端input事件监听，调用ASP.NET内置的__doPostBack函数触发服务器端的TextChanged事件。input事件能覆盖键盘输入、粘贴、拖拽文本等所有文本变化场景，比keyup更全面。

修改后的前端代码

<asp:PlaceHolder runat="server" ID="ErrorMessage" Visible="false">
   <p class="text-danger">
      <asp:Literal runat="server" ID="FailureText" />
   </p>
</asp:PlaceHolder>
<div class="form-group">
   <asp:Label runat="server" AssociatedControlID="Barcode" CssClass="col-md-2 control-label">Barcode</asp:Label>
   <div class="col-md-10">
      <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always" ChildrenAsTriggers="true">
         <ContentTemplate>
            <%-- 添加oninput事件触发回发 --%>
            <asp:TextBox runat="server" ID="Barcode" CssClass="form-control" AutoPostBack="true" 
                OnTextChanged="Barcode_TextChanged" 
                oninput="__doPostBack('<%= Barcode.UniqueID %>', '')" />
            <p class="text-danger">
               <%: BarCodeNotFound %>
            </p>
         </ContentTemplate>
      </asp:UpdatePanel>
   </div>
</div>
<div class="form-group">
   <asp:Label runat="server" AssociatedControlID="TotalScanCount" CssClass="col-md-2 control-label">Scan Count</asp:Label>
   <div class="col-md-10">
      <asp:TextBox runat="server" ID="TotalScanCount" CssClass="form-control" />
   </div>
</div>

代码说明

• <%= Barcode.UniqueID %>：获取TextBox在服务器端的唯一标识，确保__doPostBack能正确定位到目标控件并触发对应的TextChanged事件。
• oninput事件：文本框内容发生任何变化时立即触发，包括键盘输入、右键粘贴、拖拽文本等操作。
• 原有的AutoPostBack="true"可以保留，不影响新的触发逻辑。

备选方案（使用jQuery） #

如果页面已引入jQuery，也可以通过绑定事件实现，代码更简洁：

<script>
    $(function() {
        // 监听文本变化事件
        $('#<%= Barcode.ClientID %>').on('input', function() {
            __doPostBack('<%= Barcode.UniqueID %>', '');
        });
    });
</script>

注意事项 #

• 频繁触发回发可能会增加服务器负载，如果是条码扫描场景，建议考虑等待扫描完成（比如监听回车键）再触发回发，避免重复请求。
• 确保UpdatePanel的配置正确，UpdateMode="Always"和ChildrenAsTriggers="true"会保证回发后面板内容正常更新。

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