【每天进步一点点】递归式求和与文本框内容大体监测-优快云博客

本文链接：https://blog.youkuaiyun.com/wupd2014/article/details/52791347

本文介绍了一种使用oninput和onpropertychange事件实现文本框实时计算的方法，并解决了跨浏览器兼容性问题。通过JavaScript实现了对输入数据的即时计算与显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在改别人的代码的时候，看到使用onpropertychange进行文本框监测，首先代码在兼容性比较弱。解决兼容性问题可以采用HTML5标准事件oninput与ompropertychange事件（IE），意思就是在文本框上进行二个事件，不同的浏览器机制触发不同的机制

<asp:TextBox ID="txtSPLDCGZL_J" runat="server" onpropertychange="cal(this)" oninput="cal(this)" dataoption="txtSPLXJ_J" Style="ime-mode: Disabled"></asp:TextBox>
//<!--dataoption表示要累加在哪一个文本上面即和数位置处-->

oninput

Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9

onpropertychange

Internet Explorer

另个在进行输入实时判断时，写了很多代码，简单进行一下重写
这里写图片描述

根据上图的结构特点进行不同文本框的赋值改造
这里写图片描述

事先实时计算合计：

function cal(obj){
    var sum = 0;
    var objId = $(obj).attr("dataoption");                //获取动态变化需要计算的文本框ID
    if(objID==undefined) return;                          //判断是否到达求和顶端
    var objArray = $("input[dataoption='" + objId + "']");//获取计算文本框有关联的文本框
    objArray.each(function() {//求和
     if ($(this).val() != "") {
         sum += parseInt($(this).val());
       }
    });
   $("#" + objId).val(sum);//赋值
   cal($("#"+objId ).attr('dataoption'))                  //进行递归螺旋求和
}