ASP.NET下如何使用jQuery实现TextBox输入过程中实时触发变更事件

完全可以通过jQuery实现输入过程中实时触发计算，无需等待控件失焦，具体实现步骤如下：

步骤1：引入jQuery库 #

首先在你的aspx页面中引入jQuery库文件即可。

步骤2：调整服务器控件属性 #

ASP.NET服务器控件默认渲染到前端时ID会自动变化，我们可以给控件添加ClientIDMode="Static"属性，固定前端渲染后的ID，方便jQuery选择元素，调整后的控件代码如下：

<asp:TextBox ID="txtCount" CssClass="form-control" runat="server" ClientIDMode="Static"></asp:TextBox>
<asp:TextBox ID="txtPrice" CssClass="form-control" runat="server" ClientIDMode="Static"></asp:TextBox>
<asp:Label ID="lblTotal" CssClass="price" runat="server" ClientIDMode="Static"></asp:Label>

你也可以不用加这个属性，直接在jQuery选择器中使用<%= 控件ID.ClientID %>获取实际渲染的前端ID，两种方式效果一致。

步骤3：添加jQuery实时计算逻辑 #

在页面中添加如下JavaScript代码，监听输入框的内容变化事件，实时执行计算：

// 页面加载完成后执行
$(document).ready(function() {
    // 同时监听数量和价格输入框的input事件，任意一个内容变化就触发计算
    $('#txtCount, #txtPrice').on('input', function() {
        // 读取输入值，非数字或者空值默认转为0，避免计算错误
        let count = parseFloat($('#txtCount').val()) || 0;
        let price = parseFloat($('#txtPrice').val()) || 0;
        let total = count * price;
        // 格式化金额为千分位+两位小数，和原有后台格式化效果一致
        let formatTotal = total.toLocaleString('zh-CN', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
        $('#lblTotal').text(formatTotal);
    });
});

注意事项 #

• 这里使用input事件而不是keyup等键盘事件，覆盖场景更全，包括粘贴、输入法输入、右键剪切/粘贴等所有导致输入框内容变化的操作都会触发。
• 代码中已经加了非法值兼容，用户输入非数字、留空的场景下不会出现NaN报错。
• 如果不需要在输入过程中同步数据到后台，完全不需要调用原有服务端的TextChanged事件，纯前端计算就能满足需求，响应速度更快。如果需要同步后台，可以在计算完成后添加AJAX请求调用后台接口即可。

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