最近开发一个项目,需要实现用户在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. showmessage函数里

    首先说一下,漏洞是t00ls核心群传出去的,xhming先去读的,然后我后来读的,读出来的都是代码执行,1月5日夜里11点多钟,在核心群的黑客们的要求下,xhming给了个poc,我给了个exp,确实 ...

  2. 解决eclipse使用Search弹出错误问题

    在eclipse中搜索时,搜索完之后有时候会弹出错误对话框,虽然错误内容有时候不同,但是解决办法都一样. 这个问题是由于eclipse中文件不同步引起的.在eclipse中,工程文件是由eclipse ...

  3. Windows无法安装到GPT分区形式磁盘的解决办法

    现在很多新买的硬盘都是GTP格式,这种格式需要使用UEFI BIOS模式安装系统,我们以前传统的windows系统安装都是“MBR+legacy BIOS”模式安装 Windows无法安装到GPT分区 ...

  4. 【css3】如何自定义 placeholder 文本颜色

    昨天写了一篇基于 jquery 实现 ie 浏览器兼容 placeholder 效果,具体内容点击传送门.不过还是有点小瑕疵,就是不能设置 placeholder 文本颜色.本文主要介绍利用 css ...

  5. ORACLE 10g下载地址

    ORACLE 10g下载地址 oracle 下载还需要用户名我自己注册了个方便大家使用下载 密码是这个 一般不会动了 大家也不用帮我找回密码了 每次都改 也很麻烦的如果有需要可以帮我浏览下 右侧的需要 ...

  6. ubuntu 12 JDK 编译

    下载openjdk源码 http://jdk7.java.net/source.html 安装Ubuntu上面的依赖包: .参考原书 环境变量配置: .去www.hzbook.com上面将深入理解ja ...

  7. Android Screen Orientation Change (Screen Rotation) Example

    原文见: http://techblogon.com/android-screen-orientation-change-rotation-example/#

  8. Log4Net简单使用

    一. Log4net是什么.优点 用来记录程序日志,优点:1.提供应用程序运行时的精确环境,可供开发人员尽快找到应用程序中的Bug:2.日志信息可以输出到不同的地方(数据库,文件,邮箱等). 二. L ...

  9. IOS开发 图形绘制,绘制线条,矩形,和垂直和居中绘制文字

    概述 吐槽下IOS下 的图形绘图,代码冗长,不得不自己重新封装方法.整理形成本文. 绘制线 // 绘制直线 + (void)toDrawLineFromX:(CGFloat)x1 Y:(CGFloat ...

  10. akka cluster sharding source code 学习 (2/5) handle off

    一旦 shard coordinator(相当于分布式系统的 zookeeper) 启动,它就会启动一个定时器,每隔一定的时间尝试平衡一下集群中各个节点的负载,平衡的办法是把那些负载较重的 actor ...