jQuery不兼容input的change事件问题解决过程

最近开发一个项目，需要实现用户在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(); //不相同则计算
                }
            });

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

赞 (0)

相关推荐

  • jQuery对表单元素的取值和赋值操作代码

    $("#keyword")[0].value = ""; /*获得TEXT.AREATEXT的值*/ var textval = $("#text_id").attr("value"); //或者 var textval = $("#text_id").val(); /*获取单选按钮的值*/ var valradio = $("input[type=radio]:checked").va

  • jQuery获取及设置表单input各种类型值的方法小结

    本文实例讲述了jQuery获取及设置input各种类型值的方法.分享给大家供大家参考,具体如下: 获取一组radio被选中项的值 var item = $("input[@name=items]:checked").val(); 获取select被选中项的文本 var item = $("select[@name=items] option[@selected]").text(); select下拉框的第二个元素为当前选中值 $('#select_id')[0].s

  • jQuery根据ID获取input、checkbox、radio、select的示例

    input: var xxx = $('#ID').val() --------------------------------------------------------------------------------- checkbox: var xxx = [ ]; $('input[name=MyName]:checked).each(function(index, element) { xxx.push($(element).val()); // 或者 xxx.push($(thi

  • jquery validate.js表单验证的基本用法入门

    这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码 代码如下: <script type="text/javascript"> function lang(key) { mylang = { 'ls_input_myb': '请输入您的账户', 'ls_myb_email': '漫游币账户为邮箱地址', 'ls_login_password': '请输入您的登录密码', 'ls_password_length': '密码

  • jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码

    (jsp需要引入 :jquery-1.9.0.js.jquery.form.js ) ,jsp页面使用的是bootstrap制作的,看不懂的标签不用管,form表单大同小异.代码比较简陋,只是为了演示使用ajaxSubmit异步上传图片及保存数据,请海含! (参考文献:http://www.jb51.net/shouce/jquery/jquery_api/Plugins/Form/ajaxSubmit.html) 一:web (add.jsp) 复制代码 代码如下: <%@page impor

  • jquery ajax提交表单数据的两种方式

    之前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐.学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery.Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后台可以获取到Form表单的值).在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交,当然你要是想练练"打字水平"的话用第一种方式提交也未尝不可,相信开发者都不想费白劲吧!

  • js与jquery实时监听输入框值的oninput与onpropertychange方法

    本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监听文本框 value 值的变化,然后匹配相关内容. 初接项目,首先想到的是 JQ 里的 change,但是马上排除此方法,因为 change 是在文本框失去焦点时才会触发.曲线救国一下,想到用 keydown 来解决.其他一切还好,只是当不通过键盘操作,而是通过鼠标来复制粘贴时,这个事件是无法触发

  • jQuery解决input超多的表单提交

    jQuery解决input超多的表单提交

    近段时间接到一个比较奇葩的需求,对方要求在企业站中加入一个类似word的表单,并供用户在线填写与提交. 仔细看了一下,该表单的字段高达一百多个,这个量级是相当可怕的.如果每个input手动去填写id和name的话,该是一个多么可怕的体力活啊. 反复思考了一下,为避免苦逼的去逐个填写input的id与name,决定用JS配合PHP的方式来解决这个表单一连串的提交工作. 表单组成部分 表单首先按照客户的要求,将需要填写的表格与选项按照word文档的原型进行布局,使其符合用户体验,如下图: (上图只是

  • jquery中$(#form :input)与$(#form input)的区别

    $("form :input") 返回form中的所有表单对象,包括textarea.select.button等 $("form input")返回form中的所有input标签对象 form input 是属于层级选择器(将每一个选择器匹配到的元素合并后一起返回) form :input是属于表单选择器(匹配所有<input>.<textarea>.<select>.<button>元素)

  • jQuery-serialize()输出序列化form表单值的方法

    实例 输出序列化表单值的结果: 复制代码 代码如下: $("button").click(function(){ $("div").text($("form").serialize()); }); 定义和用法 serialize() 方法通过序列化表单值,创建 URL 编码文本字符串. 您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身. 序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中. 语

  • jquery下异步提交表单 异步跨域提交表单

    1.使用post提交方式 2.构造表单的数格式 3.结合form表单的submit调用ajax的回调函数. 使用 jQuery 异步提交表单代码: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无标题页</title> </head> <script src="js/jquery-1.4.2.js">&l

随机推荐