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 相关文章推荐
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
May 14 Javascript
javaScript 判断字符串是否为数字的简单方法
Jul 25 Javascript
javaScript 动态访问JSon元素示例代码
Aug 30 Javascript
js动态控制table的tr、td增加及删除的具体实现
Apr 30 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
vue2.0构建单页应用最佳实战
Apr 01 Javascript
Scala解析Json字符串的实例详解
Oct 11 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
Sep 07 Javascript
微信小程序 高德地图路线规划实现过程详解
Aug 05 Javascript
vue插槽slot的简单理解与用法实例分析
Mar 14 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
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
php模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
js简单实现图片延迟加载的方法
2016/07/19 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
Vue中使用vux的配置详解
2017/05/05 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
用Python输出一个杨辉三角的例子
2014/06/13 Python
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
Python numpy大矩阵运算内存不足如何解决
2020/11/19 Python
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
德国网上花店:Valentins
2018/08/15 全球购物
公司活动方案范文
2014/03/06 职场文书
竞选学生会演讲稿
2014/04/25 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫