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

网络编程 JavaScript 表单特效 分类:[default] 更新日期: 2016-05-10
今天同事测试发现项目中一个小bug,然后我负责解决。研究了不短的时间,终于搞定了,有点激动。呵呵。拿出来与大家分享。
想要实现的功能大概是这样的:
有两个文本框,其中一个只读,另一个可以输入。要求在可输入文本框中输入文本时,只读文本框能够获得输入的值,且只读文本框旁边出现提示信息,实时显示只读文本框的内容。
这个功能看是简单,但其实并没有想象的那么简单。(注意,可输入框的处理没什么可讨论的,关键是只读框的处理)
一开始,我们一般会想到在只读文本框上运用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 type="text" name="jsUserName" readonly/></td>
            </tr>
            <tr>
                <td>此处输入值:</td>
                <td><input 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不会触发。
如有问题或本人写的不正确的地方欢迎联系或指正。


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • 详解表单验证正则表达式实例(推荐)
    这篇文章主要介绍了详解表单验证正则表达式实例推荐的相关资料,非常不错,具有参考借鉴价值,特此分享到平台供大家参考验证:!reg.test(value) 邮箱: 代码如下:reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/i; 不包含中文: 代码如下:r ...
  • 关于IE11修改User-agent不再支持document.all等
    这篇文章主要介绍了关于IE11修改User-agent不再支持document.all等,需要的朋友可以参考下一个新的身份标识关于IE11的第一个新闻就是它有了一个新的用户代理(UA)字符串: Mozilla/5.0 (IE 11.0; Windows NT 6.3; Trident/7.0; .NET4.0E; .NET4.0C; rv:11.0) lik ...
  • js选择器全面解析
    下面小编就为大家带来一篇js选择器全面解析.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧原生JS选择器有getElementById.getElementsByName.getElementsByTagName和getElementsByClassName这四个,下面我就一个一个介绍这四个选择器的用法. 1.getElemen ...
  • JavaScript中的正则表达式(推荐)
    正则表达式通常用于在文本中查找匹配的字符串,js正则表达式在程序开发中应用非常广泛,本文给大家介绍JavaScript 中的正则表达式推荐,感兴趣的朋友一起学习吧正则表达式的大致匹配过程是:依次拿出表达式和文本中的字符比较,如果每一个字符都能匹配,则匹配成功:一旦有匹配不成功的字符则匹配失败. 正则表达式通常用于在文本中查找匹配的字符串.Python里数量词 ...
  • asp.netcore实现文件上传功能
    asp.netcore实现文件上传功能
    这篇文章主要为大家详细介绍了asp.net core实现文件上传功能,怎么做单文件和多文件上传,感兴趣的小伙伴们可以参考一下本文实例为大家分享了单文件上传.多文件上传的功能,供大家参考,具体内容如下 单文件上传 上传文件在Web应用程序中是一个常见的功能.在asp.net core中上传文件并保存在服务器上,是很容易的.下面就来演示一下怎么样在 ASP.NE ...
  • 百度UEditor修改右下角统计字数包含html样式
    百度UEditor修改右下角统计字数默认只统计前台所见的文字个数,如何让右下角统计字数包含html样式,需要的朋友可以参考下百度UEditor修改右下角统计字数默认只统计前台所见的文字个数,为了便于展示实际保存的时候是保存的包含html标签的,所以右下角的统计字数功能需要修改 /** * 计算编辑器当前内容的长度 * @name getContentLeng ...
猜你喜欢