最近开发一个项目,需要实现用户在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. asp.net 操作excel的一系列问题(未完待续)

    最近在处理exel的一些东西,遇到了很多问题,现在就在此将问题和网上找到的解决办法 1.外部表不是预期格式错误 错误经过:在读取Excel时,出现外部表不是预期的格式 错误原因1: 由于Excel 9 ...

  2. Open vSwitch实践——VLAN

    # virt-clone --original=centos65 --name=vm2 --file=vm2.qcow2 正在克隆 centos65.qcow2                     ...

  3. Redis监控技巧(转)

    来自:http://blog.nosqlfan.com/html/4166.html Redis 监控最直接的方法当然就是使用系统提供的 info 命令来做了,你只需要执行下面一条命令,就能获得 Re ...

  4. vim 光标按行移动

    记录一下: [ H/M/L ] 注意:这几个命令是大写的. 使用H/M/L这三个键,可以让光标跳到当前窗口的顶部.中间.和底部,停留在第一个非空字符上.H命令和L命令前也可以加一个数字,但数字的含义不 ...

  5. 把C编译成javascript的方法

    把C编译成javascript的方法,便于嵌入到HTML5中 https://github.com/kripken/emscripten

  6. 使用golang 开发的 andriod应用

    最近在捣鼓一个东东,就是使用golang开发andriod应用.说起来简单操作起来还挺麻烦,中间又学习了很多东西.比如ubuntu,docker,angular,ionic,jquery mobile ...

  7. python use dom to write xml file

    #encoding:utf-8 ''' write xml in dom style ''' from xml.dom.minidom import Document doc = Document() ...

  8. database link

    create database link lims_qumas_supplyconnect to QPROCESSDEV identified by qprocessdevusing '(DESCRI ...

  9. 在c#程式中配置log4net

    參考網址: http://www.cnblogs.com/kissazi2/p/3393595.html http://www.cnblogs.com/kissazi2/p/3389551.html ...

  10. 【openwrt】再设置

    https://wiki.openwrt.org/zh-cn/doc/uci/network https://wiki.openwrt.org/zh-cn/doc/uci/wireless https ...