safari 3 的一个bug : 关于select的 (我怀疑这个bug我是全球首发)

fins

浏览: 2612568 次
性别:
来自: 小胖儿的大城

最近访客更多访客>>

快了的男孩

sagadan

fancycat

u012363178

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web前端

Safari 单元测试浏览器 HTML 工作

在给gt grid编写editor时发现的 safari 版本 3.0.4

这个bug 简单点说就是,
当select下的所有option的 selected属性都是 false时,
大多数浏览器都会将选项指向上次选择的项,而safari会生造出一个空的option来,
而且这种情况不是总发生, 什么时候发生什么时候不发生不好说看后面的代码注释吧

演示文件见附件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script type="text/javascript">
	function init(selectObj) {
		
		// 对于s1 safari的做法和其他浏览器一致, 都是默认选中第一个
		selectObj=document.getElementById('s1');
		for (var i=0; i<selectObj.options.length; i++) {
			selectObj.options[i].selected=false;
		}


// 对于s2 safari的做法就出现问题了, 会生造出一个
		selectObj=document.getElementById('s2');
		for (var i=0; i<selectObj.options.length; i++) {
			selectObj.options[i].selected=false;
		}

alert(selectObj.value)  // 注意这个alert.


// 对于s3 safari的做法本来应该和 s2 一样 但是由于多了一个上面的alert, 一切又不同额 FT!!!!
// 如果你把上面的 alert 注释了 那么 s3 和 s2 完全一样 

		selectObj=document.getElementById('s3');
		for (var i=0; i<selectObj.options.length; i++) {
			selectObj.options[i].selected=false;
		}
	}
</script>

 </head>

 <body onload="init();">
	<select id="s1">
		<option value="1" selected="selected" >aaaa</option>
		<option value="2">bbb</option>
		<option value="3">ccc</option>
    </select>

<br/><br/>

	<select id="s2">
		<option value="11" >zzz</option>
		<option value="22">xxxx</option>
		<option value="33">ccc</option>
    </select>


<br/><br/>

	<select id="s3">
		<option value="111" >bbb</option>
		<option value="222">nnn</option>
		<option value="333">mmm</option>
    </select>

 </body>
</html>

safari_bug.zip (850 Bytes)
下载次数: 27

分享到：

<button>标签的一些细节 (兼冷知识开篇) | firefox 2 的一个bug (更新) :关于页面元 ...

2008-03-05 00:16
浏览 6690
评论(5)
论坛回复 / 浏览 (5 / 2880)
分类:Web前端
查看更多

5 楼 hax 2008-03-05

测试代码：

<!DOCTYPE html>
<html>
<head>
<title>Test SELECT of Safari
<script>
	
	function info(o) {
		if (o === undefined) return 'UNDEFINED';
		if (o === null) return 'NULL';
		if (o === '') return  'EMPTY';
		return o;
	}
	
	function out(msg) {
		out.buffer.push(msg);
	}
	out.buffer = [];
	out.show = function () {
		document.getElementById('stdout').innerHTML = out.buffer.join('');
	}
	
	function testSelect(id) {
		var s = document.getElementById(id);
		
		out('test ' + id);
		out('<br/>');
		out('options[0].selected = ');
		out(s.options[0].selected);
		out('<br/>');
		out('options[0].selected = ');
		out(s.options[0].selected);
		out('<br/>');
		out('value = ');
		out(s.value);
		out('<br/>');
		out('options[0].selected = ');
		out(s.options[0].selected);
		out('<br/>');
		out('selectedIndex = ');
		out(s.selectedIndex);
		out('<br/>');
		out('<br/>');
		
		/*
		s.options[s.selectedIndex].selected = false;
		out(s.selectedIndex);
		*/
	}
	
	
	window.addEventListener('load', function() {
		//testSelect('s4');
	}, false);
	
	window.addEventListener('load', function() {
		testSelect('s5');
	}, false);
	
</script>

 </head>

<body>

<div id="stdout"></div>

<form>
	<select id="s1">
		<option value="1" selected="selected">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>
	<script>testSelect('s1');</script>
	<br/>
	<select id="s2">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>
	<script>testSelect('s2');</script>
	<br/>
	<select id="s3">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>
	<script>setTimeout(function(){testSelect('s3');}, 1);</script>
	<br/>
	<select id="s4">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>
	<br/>
	<select id="s5">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>
	<br/>
</form>

<p><input type="button" onclick="out.show()" value="show log"/></p>

</body>
</html>

4 楼 fins 2008-03-05

恩我现在就是这么做的唉郁闷啊凭空又多了好多行代码

以精简代码为目的的重构但是随着测试的深入不停的添加代码
现在已经比"精简"前多了上百行的代码了 :'(

3 楼 hax 2008-03-05

那你就手动判断一下呀，如果值不符合任何一个option就设成默认的那个（比如第一个）。

2 楼 fins 2008-03-05

我是在 load之后的一个复杂的例子发现的这个bug
不在load里的话添加空option的问题还是存在的

我是在做可编辑列表的时候发现的

点击一个单元格如果这个单元格对应的编辑器是 select 那么就吧单元格的值 set给select
这时候如果单元格的值不是select的选项中的任何一个会加入空option
这个比较郁闷啊

1 楼 hax 2008-03-05

你不要在load事件中测，如果在load之后测试，会看到不同的结果。
Safari的行为和FF不一样，它允许selectedIndex=-1，即一个都不选。

但是如果初始标签上没有selected，Safari会执行一个初始化过程，将第一个select起来。

你描述的行为貌似是因为这个初始化工作在load的时候还没有完成。
alert会延时，所以第一次alert之后，初始化工作就完成了。这是为什么alert会影响你的测试结果。

不过，任何时候只要你访问select上的selectedIndex，就都会进行初始化过程。

我个人认为这可以算一个bug，但是只在极端情况下出现。

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论