当前位置: 首页 > 编程笔记 >

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

南宫海超
2023-03-14
本文向大家介绍jQuery不兼容input的change事件问题解决过程,包括了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(); //不相同则计算

                }

            });

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

 类似资料:
  • 让我们介绍一下伴随数据更新的各种事件。 事件:change 当元素更改完成时,将触发 change 事件。 对于文本输入框,当其失去焦点时,就会触发 change 事件。 例如,当我们在下面的文本字段中键入内容时 —— 不会触发 change 事件。但是,当我们将焦点移到其他位置时,例如,点击按钮 —— 就会触发 change 事件: <input type="text" onchange="al

  • 问题内容: 有人可以告诉我和事件之间的区别是什么? 我正在使用jQuery来添加它们: 它也可以代替一起使用。 相对于焦点,事件顺序可能有所不同吗? 问题答案: 通过用户界面更改元素的文本内容时发生事件。 当选择,选中状态或元素的内容 发生更改时发生 。在某些情况下,仅当元素失去焦点或按(Enter)并且值已更改时才会发生。该onchange属性可以使用:,,和。 TL; DR: :对文本内容所做

  • 本文向大家介绍解决vue项目中type=”file“ change事件只执行一次的问题,包括了解决vue项目中type=”file“ change事件只执行一次的问题的使用技巧和注意事项,需要的朋友参考一下 问题描述 在最近的项目开发中遇到了这样的一个问题,当我上传了一个文件时,我将获取到的文件名清空后,却无法再次上传相同的文件 因为我只是将data中的属性值清空而已,文件名没有变当然会不出发ch

  • 本文向大家介绍WPF中不规则窗体与WindowsFormsHost控件兼容问题的解决方法,包括了WPF中不规则窗体与WindowsFormsHost控件兼容问题的解决方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了WPF中不规则窗体与WindowsFormsHost控件兼容问题的解决方法。分享给大家供大家参考。具体方法如下: 这里首先说明一下,有关WPF中不规则窗体与WindowsFo

  • 本文向大家介绍一文解决django 2.2与mysql兼容性问题,包括了一文解决django 2.2与mysql兼容性问题的使用技巧和注意事项,需要的朋友参考一下 Django是一个开放源代码的Web应用框架,由Python写成。采用了MTV的框架模式,即模型M,视图V和模版T。它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内容为主的网站的,即是CMS(内容管理系统)软件。并于2005年7

  • 本文向大家介绍java项目jar包与jdk的版本不兼容的问题解决,包括了java项目jar包与jdk的版本不兼容的问题解决的使用技巧和注意事项,需要的朋友参考一下 这篇文章主要介绍了java项目jar包与jdk的版本不兼容的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在我们搭建框架或者引入jar包是,总是会因为版本不统一导致版本兼容问