最近开发一个项目,需要实现用户在WEB表单里的多个INPUT框中输入数量后,立即自动计算加总各项输入的数量之和,并显示在指定的INPUT框中,这个功能实现的原理是简单的,就是只需要在INPUT的onchange事件中计算加总并将结果赋给指定的INPUT框中即可实现,代码如下:

$("input.syxcost").change(function(){
computeReceivedsyxcost();
} function computeReceivedsyxcost(){ //计算加总
var syxcost=0;
$("input.syxcost").each(function(){
var cost=parseFloat($(this).val());
if (!isNaN(cost))
syxcost=syxcost + cost;
});
$("#receivedsyxcost").val(syxcost); //显示最终结果
}

原以为这样就解决了,在谷歌浏览器确实是OK的,但在IE 9中,却发现在INPUT中输入数量后,并不会立即触发change事件,存在兼容问题,在网上搜了许多,也都说存在这个问题,没有办法,我就只有自己来依据实现情况来写,我的思路是:当INPUT获取焦点时,就获取当前的VALUE并存入该INPUT的自定义的属性中(如:data-oval),然后在INPUT失去焦点的时候,就获取当前的VALUE与之前存在自定义的属性中的值是否相同,若不相同,则说明VALUE被改变,就需要重新计算,否则忽略,实现代码如下:

$("input.syxcost").focus(function(){
$(this).attr("data-oval",$(this).val()); //将当前值存入自定义属性
}).blur(function(){
var oldVal=($(this).attr("data-oval")); //获取原值
var newVal=($(this).val()); //获取当前值
if (oldVal!=newVal)
{
computeReceivedsyxcost(); //不相同则计算
}
});

经反复验证,在所有的浏览器下均显示正常,解决了兼容的问题!

原文出自我的个人网站:http://www.zuowenjun.cn/post/2014/09/22/39.html

关于解决JQUERY对INPUT元素Change事件不兼容的问题的更多相关文章

  1. jquery绑定input的change事件

    ### jquery绑定input的change事件 背景:在做一个登录页时,如果用户未输入验证码则无法点击登录按钮,所以想到了用input的change事件,但是在写完后发现无法监听input值的改 ...

  2. 解决jquery动态创建元素绑定事件失效问题

    存在问题 在我们使用jquery动态创建元素后往往会遇到一些问题,如: 给.button按钮绑定了点击时间,执行alert:(1); 点击事件代码如下: <script>$("# ...

  3. jquery监听动态添加的input的change事件

    使用下面方法在监听普通的input的change事件正常 $('#pp').on('change', 'input.videos_poster_input', function () { consol ...

  4. 复选框 省市区 联动(监听input的change事件)

    需求:省市区三级包含复选框按钮以及文字描述.点击文字显示对应的下级地区,点击复选框选择对应的下级区域勾选. 分析:监听input的change事件当点击复选框省  选择对应的第一个市区,同时默认选中第 ...

  5. 单选框radio改变事件详解(用的jquery的radio的change事件)

    单选框radio改变事件详解(用的jquery的radio的change事件) 一.总结 1.用的jquery的radio的change事件:当元素的值发生改变时,会发生 change 事件,radi ...

  6. 解决jquery与zepto等其它库冲突兼容的问题

    解决jquery与zepto等其它库冲突兼容的问题;(function ($) {    }) (jQuery); ;(function ($) {    }) (Zepto); 在Bootstrap ...

  7. jQuery input -> file change事件bug

    由jQuery绑定类型为file的input控件的change事件,发现只能被触发一次,修改方法 --> 原始代码: $input.change(function() { // somethin ...

  8. js闭包理解案例-解决for循环为元素注册事件的问题

      转发自http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html       一.变量的作用域 要理解闭包,首 ...

  9. jquery为新增元素添加事件

    <script type="text/javascript"> var $id=1; $(function(){ $(".hehe").click( ...

随机推荐

  1. 打包.a 文件时, build phases- Link Binary With Libraries

    打包.a 文件时, 如果是两个Targets那么可运行调试的  build phases-  Link Binary With Libraries  如果加入.a 文件. 那么就不需要在Compile ...

  2. URLEncode与URLDecode总结与实现

    URLEncode: 用于编码URL字符串,数字和字母保持不变,空格变为'+',其他(如:中文字符)先转换为十六进制表示,然后在每个字节前面加一个标识符%,例如:“啊”字 Ascii的十六进制是0xB ...

  3. 转载:android.屏幕锁,解锁,在取证上的应用

    中国司法-鉴定,2013年第06期杂志  

  4. javascript提升复习

    https://www.baidu.com/s?wd=JavaScript+%E9%A2%84%E8%A7%A3%E6%9E%90 http://www.cnblogs.com/HPNiuYear/a ...

  5. JAVA Builder模式构建MAP/LIST的示例

    我们在构建一个MAP时,要不停的调用put,有时候看着觉得很麻烦,刚好,看了下builder模式,觉得这思路不错,于是乎,照着用builder模式写了一个构建MAP的示例,代码如下: import j ...

  6. [2013 eoe移动开发者大会]靳岩:从码农到极客的升级之路

    (国内知名Android开发论坛 eoe开发者社区推荐:http://www.eoeandroid.com/) 前天,2013 eoe 移动开发者大会在国家会议中心召开,eoe 开发者社区创始人靳岩在 ...

  7. Scala 深入浅出实战经典 第65讲:Scala中隐式转换内幕揭秘、最佳实践及其在Spark中的应用源码解析

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...

  8. 计算空间直线与平面的交点 (C#)

    public class NGlbVec3d    {// 三维点        public double x, y, z;        public NGlbVec3d()        {   ...

  9. WPF Wonders: Transformations (and Robots!)

    indows Presentation Framework (WPF) gets a lot of mileage out of being layered on top of DirectX, in ...

  10. 为YAESU FT-817ND 增加频谱功能

    > ft817可谓是QRP神机啊,可能是一开始就接触SDR的缘故,没有频谱显示,总觉得很难受,好在经典的817从不缺乏魔改.终于找到一个解决方案: http://item.taobao.com/ ...