js监控表单值的修改和同步 这是跨浏览器支持的

要实现的功能是这样的：有两个文本框，一个是只读的，另一个可以输入。要求在输入文本框中输入文本时，只读文本框可以获得输入值，并在只读文本框旁边出现提示信息，实时显示只读文本框的内容。这个功能很简单，但并没有想象的那么简单。(注意输入框的处理没什么好讨论的，关键是只读框的处理。)首先，我们通常会想到在只读文本框上使用onchange事件。首先，人们发现onchange根本没有用。该事件是在文本框获得焦点后触发的，然后内容发生变化并失去焦点。现在，只读文本框中没有这样的东西，它的内容被js改变了。因此，我们需要找到另一种方法。此时，在互联网上发现了onpropertychange事件。无论文本框的属性如何更改，当属性更改时都会触发此事件。请注意，这是属性的变化，而不仅仅是值的变化。试试吧，真的很管用。但是，此事件是IE专有的。WEB开发必须考虑浏览器的兼容性。于是我继续探索……我在网上看到了另一个事件：oninput。网络上无处不在：fireFox中的这个事件相当于IE中onpropertychange的事件。然而，当我尝试的时候，我发现完全不一样。Oninput事件似乎在fireFox中不起作用。经过一段时间的测试，我终于意识到oninput并不等同于onpropertychange(网上到处都是发帖，我也不认真测试)。Oninput只在用户输入值发生变化(即值发生变化)时触发，而不是在所有属性都发生变化时触发，oninput也不会在值通过js发生变化时触发。这令人沮丧。很难看到一些希望，但我又失望了。幸运的是，没有绝望.哎，浏览器兼容性问题真麻烦。想了想，总有另一番模样。对于fireFox等浏览器，可以通过计时器检查只读文本框的内容是否发生了变化。测试结束后，你终于完成了。发布下面的代码并与您分享。工业工程的影响：

火狐渲染图：

此外，我还成功测试了谷歌Chrome(就像fireFox一样)。HTML代码：复制代码如下：表tr t此处的值由js设置：/Td tdinput tid=' js username ' type=' text ' name=' js username ' readonly//Td/tr t输入此处的值：/Td input id=' username ' type=' text ' name=' username '/Td/tr/table JavaScript代码：复制的代码如下： $(function(){ var js username=' '；If($.browser.msie)//IE浏览器{$ ('# username ')。获取(0)。onpropertytchange=setjsusername；$('#jsUserName ')。获取(0)。onpropertychange=句柄；} else//其他浏览器{ var intervalName//定时器句柄$ ('# username ')。获取(0)。addeventlistener ('input '，setjsusername，false)；//获得焦点后，启动定时器$ ('# username ')。focus(function(){ interval name=set interval(handle，1000)；});//失去焦点时，清除定时器$ ('# username ')。blur (function () {clearinterval(区间名))；});}//设置jsUserName输入函数setjsusername () {$ ('# jsusername ')的值。val ($ (this)。val())；}//js username输入值变化时要执行的function function handle()在这里判断没有意义{//ie browser，但是为了统一提取公共代码而进行处理。if($('#jsUserName ')。val()！=jsUserName) { $('#toolTip ')。移除()；$ ('# jsusername ')。父项()。append ('span id=' tooltip '这里的信息显示，通过js改变输入的值也可以响应相应的事件：span style=' color:redstyle=' color:red' $('#jsUserName ')。val()'/span/span ')；jsUserName=$('#jsUserName ')。val()；} } });说明：为了方便起见，在js代码中使用了jQuery。不用也一样。此外，考虑到性能问题，我们可以考虑何时启动和清除定时器以及定时器的延迟时间。总结：1。onchange事件和onpropertychange事件的区别：onchange事件是在内容发生变化(内容可能仍然相等两次)而失去焦点时触发的；onpropertychange事件是实时触发的，即每次添加或删除一个字符都会触发，也是由js change触发的，但事件IE是专有的。2.oninput事件与onpropertychange事件的区别：oninput事件是除IE之外的大多数浏览器都支持的事件，它是在值发生变化时实时触发的，即每次添加或删除字符时都会触发，但通过js在值发生变化时不会触发；Onpropertychange事件将在任何属性更改时触发，而oninput仅在值更改时触发。oninput应该通过addEventListener()注册，onpropertychange的注册方式与一般事件相同。(这里所有事件在js中动态绑定，实现内容和行为的分离。) 3.当oninput和onpropertychange失败时：(1)oninput事件：a)。当脚本中的值发生变化时，不会触发；b)。当从浏览器的自动下拉提示中选择时，它不会触发。(2)onpropertytchange事件：当输入设置为disable=true时，不会触发onpropertytchange。如有问题或写错，请联系或指正。