关于 百度有啊 的一个细节探讨

今天上了一下 有啊 ，随便看了一点源代码,对于此现象 有点微言：

如上所示，点击 输入商品框时，输入商品这几个字会没有，变成

百度的实现为 ：

 

<input type="search" results="8" autosave="baidu" accesskey="s" placeholder="输入商品" 
name="keyword" size="24" class="" id="mall_search_input"/>	
		
//(function(){
				if(window.navigator.userAgent.indexOf("WebKit")== -1){
					document.getElementById('mall_search_input').className="";
					document.getElementById('mall_search_input').value="输入商品";
					document.getElementById('mall_search_input').onfocus=function(){
						if(this.value=='输入商品'){this.value='';this.className='focus';}
					}
					document.getElementById('mall_search_input').onblur=function(){
						if(this.value==''){this.value='输入商品';this.className='';}
					}
				}
			//})()
				function globalSearch(){
					if(document.getElementById('mall_search_input').value==""||
document.getElementById('mall_search_input').value=="输入商品"){
						document.getElementById('mall_search_input').focus()
						return false;
					}
				}

这种做法实在有待商讨：

1.全局变量问题自不必说

2.语义化问题：输入商品 这个词 到底是什么 ？ 它真的是 mall_search_inputa 这个输入框的值 么？？  毫无疑问 youa认为是，它在点击提交时也进行了过滤。

3.输入商品 这个词 有必要重复这么多出现么？

4.随意在标签添加属性，那么还有申明 html4 strict 模式的必要么

输入商品 从youa的功能以及表现来看，应该是属于提示的范畴 ，它和mall_search_inputa 这个输入框的值没有丝毫关系，那么我们设想一下 对于 一个盲人来说 ，这个提示还存在么？ 那么 youa这个购物网站 可访问性必要受损 。

正确的做法 应该是  John Resig 在 Pro javascript technique 中提到的 label 定位提示法 ，不知道是 youa的前端 忽视了这个问题，还是没有读过这本书。

我在 

构建标准web 之 功能表单 (09-05-12)

中 大概 按照ejohn 的思路实现了 label 提示法 ，应该比 youa 的做法好一点。 （我这里(input 已有一个 label )采用了简化的提示标签javascript生成，更好的符合渐进增强理念应该是 提示标签事先现在html中，在其后的javascript中将其绝对定位到input上面。 ）

 

 

 

 

 

 

 

评论

5 楼 yiminghe 2009-06-04  

lucane 写道

到底该不该自定义html组件的属性？
自定义会带来很多方便
但又会破坏标准。。。

看个人了，其实无所谓，不过我喜欢看到 w3c 验证通过的绿钩，
还有一些属性通不过验证但是 有些浏览器会提供特殊功能的

比如 这里的 placeholder ,webkit 内核的浏览器会帮我们实现提示功能的。

4 楼 lucane 2009-06-04  

到底该不该自定义html组件的属性？
自定义会带来很多方便
但又会破坏标准。。。

3 楼 sfh 2009-06-04  

<p>楼主是个严谨的人，但是很明显youa前台的开发者没考虑那么多。</p>

2 楼 bopeng 2009-05-28  

只是细节问题啊
并不影响功能的实现
对于一个网站来说到底应该牺牲细节换取时间呢，还是应该牺牲时间，换取细节？

1 楼 lifesinger 2009-05-22  

很可能是后台开发人员或前端新手写的，很正常的。

另一个角度讲，上面的代码并没什么问题，能正常运行，能达到预期需求，很多情况下，这就不错了。