js监听表单value的修改同步问题,跨浏览器支持


Posted in Javascript onDecember 31, 2009

想要实现的功能大概是这样的:
有两个文本框,其中一个只读,另一个可以输入。要求在可输入文本框中输入文本时,只读文本框能够获得输入的值,且只读文本框旁边出现提示信息,实时显示只读文本框的内容。
这个功能看是简单,但其实并没有想象的那么简单。(注意,可输入框的处理没什么可讨论的,关键是只读框的处理)

一开始,我们一般会想到在只读文本框上运用onchange事件。一试,发现onchange根本没用,该事件是在文本框获得焦点,然后内容改变失去焦点后才触发的,现在在只读文本框上根本没有这些,它的内容是通过js改变的。于是,需要寻找另外的方法。

这时,在网上找到了onpropertychange事件。该事件在文本框属性改变时触发,不管是通过什么方式改变的。注意,是属性改变,而不仅仅是value改变。一试,果然好使。然而,这个事件是IE专有的。WEB开发,必须得考虑浏览器的兼容问题。于是继续摸索……

在网上有看到了另外一个事件:oninput。网上到处都是:fireFox中的该事件与IE中onpropertychange的事件等同。然而,我一试,发现根本不等同。oninput事件在fireFox中似乎没有起作用。经过一段时间测试,终于明白,原来oninput并非与onpropertychange等同(网上到处到处乱转贴,也不认真测试一下)。oninput只在用户输入值改变时触发(即value改变),并非所有属性改变时触发,而且,通过js改变value时,oninput不会触发。这下郁闷了。好不容易看到点希望,又再次陷入了失望,还好没有绝望……哎,浏览器兼容问题真是麻烦。

左思右想,总有又有了眉目。对于fireFox等浏览器,可以通过定时器检查只读文本框的内容是否改变。测试后,终于大功告成。下面把代码贴出来与大家分享。

在IE中的效果:

js监听表单value的修改同步问题,跨浏览器支持

FireFox中的效果图:

js监听表单value的修改同步问题,跨浏览器支持

另外,我还在google Chrome测试也成功了(跟fireFox一样的)。

HTML代码:

<table> 
            <tr> 
                <td>此处值通过js设置:</td> 
                <td><input id="jsUserName" type="text" name="jsUserName" readonly/></td> 
            </tr> 
            <tr> 
                <td>此处输入值:</td> 
                <td><input id="userName" type="text" name="userName"/></td> 
            </tr> 
        </table>

JavaScript代码:
$(function() 
        { 
            var jsUserName = ""; 
            if($.browser.msie)    // IE浏览器 
            { 
                $("#userName").get(0).onpropertychange = setJsUserName; 
                $("#jsUserName").get(0).onpropertychange = handle; 
            } 
            else    // 其他浏览器 
            { 
                var intervalName;    // 定时器句柄 
                $("#userName").get(0).addEventListener("input",setJsUserName,false);                 // 获得焦点时,启动定时器 
                $("#userName").focus(function(){ 
                    intervalName = setInterval(handle,1000); 
                }); 
                // 失去焦点时,清除定时器 
                $("#userName").blur(function() 
                { 
                    clearInterval(intervalName); 
                }); 
            } 
            // 设置jsUserName input的值 
            function setJsUserName() 
            { 
                $("#jsUserName").val($(this).val()); 
            } 
            // jsUserName input的值改变时执行的函数 
            function handle() 
            {     
                // IE浏览器此处判断没什么意义,但为了统一,且提取公共代码而这样处理。 
                if($("#jsUserName").val() != jsUserName) 
                { 
                    $("#toolTip").remove(); 
                    $("#jsUserName").parent().append("<span id='toolTip'>看到这里的信息表明,通过js改变input的值也能响应相应事件:<span style="color:red;" style="color:red;">" + $("#jsUserName").val() + "</span></span>"); 
                    jsUserName = $("#jsUserName").val(); 
                } 
            } 
        });

说明:为了方便,js代码使用了jQuery。不使用是一样的。
另外,考虑性能问题,可以考虑何时启动定时器和清除定时器以及定时器延时时间。
总结:
1、onchange事件与onpropertychange事件的区别:
onchange事件在内容改变(两次内容有可能还是相等的)且失去焦点时触发;onpropertychange事件却是实时触发,即每增加或删除一个字符就会触发,通过js改变也会触发该事件,但是该事件IE专有。
2、oninput事件与onpropertychange事件的区别:
oninput事件是IE之外的大多数浏览器支持的事件,在value改变时触发,实时的,即每增加或删除一个字符就会触发,然而通过js改变value时,却不会触发;onpropertychange事件是任何属性改变都会触发的,而oninput却只在value改变时触发,oninput要通过addEventListener()来注册,onpropertychange注册方式跟一般事件一样。(此处都是指在js中动态绑定事件,以实现内容与行为分离)
3、oninput与onpropertychange失效的情况:
(1)oninput事件:a). 当脚本中改变value时,不会触发;b). 从浏览器的自动下拉提示中选取时,不会触发。
(2)onpropertychange事件:当input设置为disable=true后,onpropertychange不会触发。
如有问题或本人写的不正确的地方欢迎联系或指正。
Javascript 相关文章推荐
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
在JavaScript中通过URL传递汉字的方法
Apr 09 Javascript
JavaScript格式化数字的函数代码
Nov 30 Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
浅谈Javascript线程及定时机制
Jul 02 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
JavaScript之map reduce_动力节点Java学院整理
Jun 29 Javascript
详谈for循环里面的break和continue语句
Jul 20 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 Javascript
js跟随滚动条滚动浮动代码
Dec 31 #Javascript
Javascript的匿名函数小结
Dec 31 #Javascript
JavaScript 对Cookie 操作的封装小结
Dec 31 #Javascript
Javascript的闭包
Dec 31 #Javascript
javascript Onunload与Onbeforeunload使用小结
Dec 31 #Javascript
JavaScript 常用函数
Dec 30 #Javascript
jQuery的三种$()
Dec 30 #Javascript
You might like
PHP 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
curl和libcurl的区别简介
2015/07/01 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
php禁用cookie后session设置方法分析
2016/10/19 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
js获取图片长和宽度的代码
2009/11/24 Javascript
尝试在让script的type属性等于text/html
2013/01/15 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
javascript获取checkbox复选框获取选中的选项
2014/08/12 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
Python3处理文件中每个词的方法
2015/05/22 Python
在Django中创建动态视图的教程
2015/07/15 Python
利用python画一颗心的方法示例
2017/01/31 Python
如何在Django项目中引入静态文件
2019/07/26 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
九州传奇上机题
2014/07/10 面试题
2016年秋季新学期致辞
2015/07/30 职场文书
治理商业贿赂工作总结
2015/08/10 职场文书
校运会广播稿
2015/08/19 职场文书
2016党校学习心得体会范文
2016/01/07 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏
python实现学生信息管理系统(面向对象)
2022/06/05 Python
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技