循环触发onpropertychange在IE8下的bug问题

默默不得鱼 2011-11-30 04:49:08

话不多说直接上代码了有IE8的帮忙调调问题比较有挑战

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

		<title>无标题页</title>

		<script type="text/javascript">

			//控制文本框输入必须符合数据库中decimal格式(len,x)

			//(4,2)有效长度4,即去除小数点最多4位,小数点部分最多2位

			//1111 111.1 1.2 11.22  true

			// 1111.22  1111.222    false			

			window.onload= function() {

				var t1=document.getElementById('t1');

				var len=4,x=2;

				if(x==0) {

					str="^(?!0{2,})(?!0\\d+)\\d{0,"+len+"}$";//小数位0

				} else if(x==1) {//小数位1时

					str="^(?!0{2,})(?!0\\d+)(?:\\d{1,"+(len-x)+"}\\.?[\\d+]{0,"+x+"})(?!\\.)$";

				} else {//小数位>=2

					str="^(?!0{2,})(?!0\\d+)(?:\\d{1,"+(len-x)+"}\\.?[\\d+]{0,"+x+"}|\\d{1,"+((len-x)+1)+"}\\.?[\\d+]{0,"+(x-1)+"})(?!\\.)$";

				}

				var reg=new RegExp(str);

				t1.onpropertychange= function() {

					if(this.value.length>0) {

						if(!reg.test(this.value)) {

							this.value=this.value.substring(0,this.value.length-1);

							//每次删除value最后一个字符,再赋值value之后当然就又会自动触发onpropertychange

							//如果不满足正则,就又会再删一个字符,就这样不断触发onpropertychange直到正则验证通过

							//IE8下会出现间歇性触发的问题,输入aa就看到效果了,输第一个a之后触发了把a删掉,输第二个a时候就不会触发了

							//如果给文本框加个padding:0就正常了,但是如果再加上width:100px就又复发了

							//去掉DOCTYPE头也可以 但是你懂得,影响页面布局了

						}

					}

					return false;

				};

			};

		</script>

	</head>

	<body>

		<input type="text" id="t1" style="padding:0;" />

	</body>

</html>

...全文

559 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

黄_瓜 2011-12-02

打赏
举报

*{ margin: 0; padding: 0; }

Legend1988 2011-12-01

打赏
举报

学习学习。onpropertychange一直都有一些貌似bug的东西，比如IE9下无法响应退格键，不能和onblur同时使用等，所以像二楼所说的用onkeyup吧~~

默默不得鱼 2011-11-30

打赏
举报

[Quote=引用 9 楼 hookee 的回复:]
确实有这种情况
如果设置了width，就再设置height就可以解决了。
<input type="text" id="t1" style="padding:0;width:100px;height:18px;" />
[/Quote]这个我也发现了关键是治标不治本啊是打算写进公司产品的之前的也是用keycode在那比较
可惜对onpropertychange情有独钟

hookee 2011-11-30

打赏
举报

确实有这种情况
如果设置了width，就再设置height就可以解决了。
<input type="text" id="t1" style="padding:0;width:100px;height:18px;" />

一個程序員 2011-11-30

打赏
举报

onpropertychange的本意是对象的任何属性发生变化后，都会再次触发onpropertychange

所以在onpropertychange事件函数内部修改对象属性，需要一个开关控制，控制onpropertychange不被触发

这是我使用onpropertychange的时候做的开关控制

el.onpropertychange = (function(){
var isOpen = true; // 闭包生成一个onpropertychange的开关
return function(){
if (isOpen ) return;
isOpen = false; // 先关闭开关

// 做其他事情

isOpen = true;//最后再打开开关
};
})()

Mr-Jee 2011-11-30

打赏
举报

[Quote=引用 6 楼 ifandui 的回复:]

引用 5 楼 cj205 的回复:
引用 4 楼 ifandui 的回复:

引用 1 楼 wangbin1986 的回复:
这不是ie8的bug，应该算是程序bug， onpropertychange换成onkeyup试试
那为何其其他IE都没问题用oninput火狐下也没问题

其实我想说如果我输入111 然后光标移动到第一个1的前面然后输入字母结果会发生什么？
会删……
[/Quote]对啊这和初衷是不相符的。

当然针对楼主遇到的问题，我测试并查了下。相信楼主也已经百度谷歌了N页，该出现的都出现了，该遇到的都遇到了。是不是该重新考虑下实现了？

默默不得鱼 2011-11-30

打赏
举报

[Quote=引用 5 楼 cj205 的回复:]
引用 4 楼 ifandui 的回复:

引用 1 楼 wangbin1986 的回复:
这不是ie8的bug，应该算是程序bug， onpropertychange换成onkeyup试试
那为何其其他IE都没问题用oninput火狐下也没问题

其实我想说如果我输入111 然后光标移动到第一个1的前面然后输入字母结果会发生什么？
[/Quote]会删光光

Mr-Jee 2011-11-30

打赏
举报

[Quote=引用 4 楼 ifandui 的回复:]

引用 1 楼 wangbin1986 的回复:
这不是ie8的bug，应该算是程序bug， onpropertychange换成onkeyup试试
那为何其其他IE都没问题用oninput火狐下也没问题
[/Quote]
其实我想说如果我输入111 然后光标移动到第一个1的前面然后输入字母结果会发生什么？

默默不得鱼 2011-11-30